Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Reuse default components in custom components

default discord avatar
joschuadev2 years ago
4

I would like to reuse the form from

collection-slug/create

inside my custom collection list view.



I know that I can overwrite any default components in the collection config, but is there a way to import and use the default components or do I have to build the form from scratch?

  • default discord avatar
    jessrynkarlast year

    Hey

    @217604129776861185

    sorry for the delay here - you can import the different fields individually from

    payload/components

    . We'll be making it easier to reuse Payload components in the near future, keep tabs on progress here

    https://github.com/payloadcms/payload/discussions/293
  • default discord avatar
    steadysnaillast year
    @854377910689202256

    Any updates to the reusing of components?



    @854377910689202256

    Do you know where I can find the collapsible field to import into a custom react component?

  • default discord avatar
    jessrynkarlast year

    Hi

    @919477830927130655

    - we're still working on the reusable component library. You can find the code for the collapsible field here:

    https://github.com/payloadcms/payload/blob/main/packages/payload/src/admin/components/forms/field-types/Collapsible/index.tsx
  • default discord avatar
    steadysnaillast year
    @854377910689202256

    What would the import statement look like in the react .tsx file ? I'm currently using


    import { CollapsibleField } from "payload/components/forms";

    but getting the error:

    Module '"payload/components/forms"' has no exported member 'CollapsibleField'
Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.