Passing props into custom component

default discord avatar
gregwhitworth
12 months ago
7

So I am wanting to produce text content of varying nature to help structure the CMS a bit and provide a bit more insight to the user. It seems that the UI type doesn't allow me to pass props into it.



Here is my collection config:



{ name: 'description', type: 'ui', admin: { components: { Field: FieldContent("hello") } } },

And here is the component, it's very basic right now because I'm just trying to get it wired up:



import React, {useState} from 'react'; import './index.scss'; const baseClass = 'customer-orders'; const FieldContent: React.FC = (props) => { const text = props.text; return ( <div className={baseClass}> {text} </div> ); }; export default FieldContent;
  • discord user avatar
    jarrod_not_jared
    Payload Team
    12 months ago

    You should say Field: () => FieldContent({ text: β€œhello” }) πŸ™‚

  • default discord avatar
    kaspartr
    10 months ago

    Can you access document or data in the Field argument also?


    e.g. the following data is undefined but is it possible to pass in document data to custom component?



    Ala in the following fashion



    Field: ({ data }) => MyComponent({value: data.myFieldValue})
  • discord user avatar
    jarrod_not_jared
    Payload Team
    10 months ago

    For that you would want to use the react hooks we expose to get the value of the field you want, read about our hooks here

    https://payloadcms.com/docs/admin/hooks
  • default discord avatar
    kaspartr
    10 months ago

    Thank you, this works

    and

    its reactive. Good stuff πŸ™‚

  • default discord avatar
    johnrisby
    last month

    I've just found this thread because I needed to do the same, and that works great except I'm having to manually pass the name, path and label to the component - can I send the custom props as additional props to the standard ones? (in this particular case, I'm extending a text field so using TextFieldType and extending that with my additional props. If I can't do it exactly that easily, inside the field definition instead of having to write out {name: "nameoffield", label:"labeloffield" ... etc, is there a way to set them there dynamically? thanks

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    @johnrisby Yeah should work just like this:



    Field: (fieldProps) => MyComponent({ ...fieldProps, myCustomProp: 'some-value' })

    Then in your custom component you could do:


    const { myCustomProp, ...rest } = props
    
    // render Input component and pass `rest` props
    // <Input {...rest} />



    or you could key them onto something else like this:


    Field: (fieldProps) => MyComponent({ fieldProps, myCustomProp: 'some-value' })


    Then in your custom component you could do:


    const { fieldProps, myCustomProp } = props
    
    // render Input component and pass `rest` props
    // <Input {...fieldProps} />
  • default discord avatar
    johnrisby
    last month

    that works perfectly, thanks Jarrod!

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.