Simple custom component example

default discord avatar
KasparTr
7 months ago
1

I'm attempting to create a simple custom component for Number input field and add that to collection.


I have created custom UI components, they are simple as they don't required any data to be sent to collection.



I have been through documentation about this:


https://payloadcms.com/docs/admin/hooks
https://payloadcms.com/docs/fields/overview#custom-components

All the example don't really work in real life, they don't compile (e.g. Property 'path' does not exist on type 'string'.ts and other errors).



Does anybody have a simple custom components they have made for String and or Number fields that work when added to Collection and perhaps a reference to doc where it describes how to add custom input components.



For example, while CustomTextComponent works, CustomNumberComponent doesn't for some reason (just changed "string" with "number").



type Props = { path: number }

const CustomNumberField: React.FC<Props> = ({ path }) => {
  const { value, setValue } = useField<number>({ path })

  return <input onChange={e => setValue(e.target.value)} value={value} />
}
export default CustomNumberField;


Type 'number' is not assignable to type 'string'.ts

  • default discord avatar
    Jarrod
    7 months ago
    path

    is the path key for the field inside the form the field is rendered inside of, it will always be a string

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.