#ExtendCollectionsProvider

interface ExtendCollectionsProviderProps {
  collections: CollectionOptions[]
  children?: ReactNode
}

import { ExtendCollectionsProvider, CollectionOptions } from '@tachybase/client'

const userCollection: CollectionOptions = {
  name: 'users',
  title: '{{t("Users")}}',
  fields: [
    {
      type: 'string',
      name: 'name',
      title: '{{t("Name")}}',
    },
    {
      type: 'string',
      name: 'email',
      title: '{{t("Email")}}',
    },
  ],
}

const MyPlugin = () => {
  return (
    <ExtendCollectionsProvider collections={[userCollection]}>
      <CollectionProvider name="users">
        <ChildComponent />
      </CollectionProvider>
    </ExtendCollectionsProvider>
  )
}

const ChildComponent = () => {
  const collection = useCollection()

  return (
    <div>
      <h1>{collection.name}</h1>
    </div>
  )
}

import { useExtendCollections } from '@tachybase/client'

const MyComponent = () => {
  const collections = useExtendCollections()

  return (
    <div>
      {collections.map(collection => (
        <div key={collection.name}>{collection.title}</div>
      ))}
    </div>
  )
}