Simple custom component example

default discord avatar
KasparTrlast year
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
    Jarrodlast year
    path

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

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.