Use payload's own toast notification inside custom React components

hayskapoy8 months ago

8

• 

  tinouti2 years ago

  @712127536326246413

  did you figure out how to do this by any chance?

• 

  alessiogr

  2 years ago

  Would be interested in that too. Maybe it's better building an interface for toasts in payload which can be used externally by plugins, instead of using react-toastify directly?

  
  
  @364124941832159242

  what do you think? Will build it if you think that's a good idea!

  
  
  

  You can check how it's done in payload, e.g.:

  https://github.com/AlessioGr/payload/blob/extra_attribute_for_fields/src/admin/components/elements/Autosave/index.tsx#L65
  
  

  but I didn't get it to work in a payload app (e.g. through a plugin) like that. Not sure why, maybe it's not part of the ToastContainer

• 

  kaspartr2 years ago

  @360823574644129795

  do you have examples of how you used react-toastify in your Payload app?

  
  
  

  I called this inside the hook (where changes to data is non reactive) and the toas message did not turn up.

• 

  denolfe

  2 years ago

  This would likely fall under this Priority 1 Roadmap item:

  https://github.com/payloadcms/payload/discussions/293
  
  @712127536326246413

  Maybe add a comment on that calling out the toast notifications specifically

• 

  klapec12 months ago

  In case anyone ends up here - install

  react-toastify

  ,

  import { toast } from 'react-toastify';

  and then you can call e.g.

  toast.error('your_message')

  which will cause a properly styled notification to appear

• 

  anders229212 months ago

  In later betas of 3.0 react-toastify is changed to sonner. It's exported from payload so all you have to do is

  
  
  

  import { toast } from '@payloadcms/ui';
  
  toast.success('My success message');
  toast.error('My error message');

  
  
  

  I think that is a strange thing to ask from payload. In your own front end you add the toaster yourself.

  
  
  

  Just use sonner to your layout if you want to use the same.

  
  
  

  That’s not how your packet manager works. It’s only installed once. Same package used for both 😃

• 

  hristo600412 months ago

  This works, but only in the admin panel. If you'd like to reuse it on the frontend, you'll need the Toaster component somewhere in your layout and that's unfortunately not exported from payload. For now.

  
  
  

  Yeah, that's what I do, but isn't it like having sonner as installed package/dependency twice? It's not a big deal, but still.

  
  
  

  Oh! Good to know 😀

• 

  dkirchhof9 months ago

  At some point custom toast notifications stopped working. Probably something to do with the update of "react-toastify"?!

  
  

  I have to add <ToastContainer /> in my component where I want to show a notification 🤔