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” }) 🙂
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/hooksThank you, this works
andits reactive. Good stuff 🙂
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
@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} />
that works perfectly, thanks Jarrod!
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.