fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.34k stars 676 forks source link

{type} not defined on toastClassName #939

Open omar-qayum opened 1 year ago

omar-qayum commented 1 year ago

In the docs it says this for styling: **const contextClass = { success: "bg-blue-600", error: "bg-red-600", info: "bg-gray-600", warning: "bg-orange-400", default: "bg-indigo-600", dark: "bg-white-600 font-gray-300", };

const App = ()=> { return (

<ToastContainer toastClassName={({ type }) => contextClass[type || "default"] + " relative flex p-1 min-h-10 rounded-md justify-between overflow-hidden cursor-pointer" } bodyClassName={() => "text-sm font-white font-med block p-3"} position="bottom-left" autoClose={3000} /> ) }**

I am running v9 but {type} does not exist on toastClassName. Is the doc correct?

omar-qayum commented 1 year ago

It works but TS is throwing this error: Property 'type' does not exist on type '{ type?: TypeOptions | undefined; defaultClassName?: string | undefined; position?: ToastPosition | undefined; rtl?: boolean | undefined; } | undefined'.ts(2339)

fkhadra commented 1 year ago

@omar-qayum could yu share a sandbox with you issue please.

Joel-Mercier commented 1 year ago

Hello thank you for this cool library ! Here is a link to a sandbox showing the typescript error (right panel under the "Errors" tab)

The example is taken from your documentation here

matthewmcintyre commented 1 year ago

Try doing something like this:

<ToastContainer
  position="top-center"
  toastClassName={(context) =>
    contextClass[context?.type ?? 'default'] +
    ' relative flex p-1 min-h-10 rounded-lg justify-between overflow-hidden cursor-pointer'
  }
  bodyClassName={() => 'text-sm font-white font-med block p-3'}
/>

credit to this issue: https://github.com/fkhadra/react-toastify/issues/914