Creating Custom Components for Your Admin Panel

zed0547last year

21

• 

  a_codrrlast year

  thanks

• 

  zed0547last year

  My pleasure

• 

  a_codrrlast year

  'use client'
  import type { ArrayFieldClientComponent } from 'payload'
  
  import { ArrayField } from '@payloadcms/ui'
  import React from 'react'
  
  export const CustomArrayFieldClient: ArrayFieldClientComponent = (props) => {
    return <ArrayField {...props} />
  }

  
  
  

  Where can I put my custom value here? Since Forexample i will use like fetching and stuff

• 

  zed0547last year

  If you want to pass a custom prop to your component you can adjust your types like so:

  
  
  

  'use client'
  import type { ArrayFieldClientProps} from 'payload'
  
  import { ArrayField } from '@payloadcms/ui'
  import React from 'react'
  
  type Props = { /** Your custom types here */ } & ArrayFieldClientProps
  
  export const CustomArrayFieldClient: React.FC<Props> = (props) => {
    return <ArrayField {...props} />
  }

• 

  a_codrrlast year

  oh. Nice. I meant like I want to put on data. Like i fetch calculated then display on the Field.

• 

  zed0547last year

  You fetch some data like you typically would, then you use either

  useField

  or another React hook as shown here:

  https://payloadcms.com/docs/admin/react-hooks
• 

  a_codrrlast year

  like I have to use customField not ArrayField right?

• 

  zed0547last year

  No, you can use ArrayFields

• 

  a_codrrlast year

  oh. I see. u change the value using hooks right?

• 

  zed0547last year

  Right

• 

  a_codrrlast year

  oh ok. Thanks.

• 

  zed0547last year

  My pleasure

• 

  a_codrrlast year

  if i use payload delete on media collection will it also trigger the deletion inside my s3?

• 

  zed0547last year

  Yep

• 

  a_codrrlast year

  Thanks

  
  
  @654031862146007055

  
  https://github.com/payloadcms/payload/blob/main/examples/custom-components/src/collections/Fields/text/index.ts
  
  

  On this example U can create both client and server component right? What is the purpose of creating both

• 

  zed0547last year

  Server components get special props passed to them like a

  req

  which has a Payload instance and a user object on it. You can use RSC's to communicate with your server directly as its still on the server, but it cannot have any interactions. Client components can have interactions but cannot use server-only functions or actions. I'd encourage you to look further into React and the differences between a client and server component for more info

  
  
  

  As this is mostly a React concept, it's jsut that Paylaod will pass different default props to your component depending on the context they run in

• 

  a_codrrlast year

  oh ok. If I use some componenet like useEffect then I should use client componenet right? And then calling rest api to the server. since payload.find or something only exist on server?

  
  
  

  am i right?

• 

  zed0547last year

  One pattern, for example, is to wrap a client component with a server component such that you do your initial data fetching on the server component and then pass props down to your client component for interaction.

  
  
  

  Yes, you're right

  
  
  

  You can call REST api's in both

  
  
  

  Via fetch

• 

  a_codrrlast year

  I know but I can't call payload.find on client?

• 

  zed0547last year

  Right, you can't use the Local API on the client

• 

  a_codrrlast year

  Thank you