Passing props into custom component

default discord avatar
gregwhitworthlast year
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;
  • You should say Field: () => FieldContent({ text: “hello” }) 🙂

  • default discord avatar
    kaspartrlast year

    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})
  • 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
    kaspartrlast year

    Thank you, this works

    and

    its reactive. Good stuff 🙂

  • default discord avatar
    johnrisby11 months ago

    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
    11 months ago

    @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
    johnrisby11 months ago

    that works perfectly, thanks Jarrod!

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

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