Adding a close icon

[FarazPatankar]

Is there a recommended solution to adding a close icon to the toast? Based on what I can see in docs, we can have the toast close by simply clicking on it but how do my users know that if they don't see a close icon?

I also noticed we can pass JSX to the toast itself. Is that what we're expected to do in such a situation or is there a better alternative?

[aviral-clarifai]

If the JSX solution works for you; you can easily make your own helper over cogotoast that reads 'showClose' prop and renders whatever you give it with a predefined close icon. that's the best way to do it. you could alias it in your webpack build to something like appUtils/toast' or 'toast' to as to useimport toast from 'appUtils/toast';instead of doingimport cogoToast from 'cogo-toast';`

[mirshko]

I actually wrote a custom toast hook ontop of it,

export const addToast = ({ body, type = "success", hideAfter = 6 }) => {
  const { hide } = cogoToast[type](
    <ToastBody body={body} onDismiss={() => hide()} />,
    {
      position: "bottom-right",
      hideAfter,
    }
  );

  return { hide };
};

Usage

const addToast = useToast()

addToast({
    body: "You’ve succesfully logged out",
    type: "success",
})

<ToastBody ... /> is just a JSX component that has a button and some other markup for handling the body

I'm not using the onClick on the cogoToast function options as there are some clickable elements in my ToastBody such as a link to see the status of something. Otherwise it would probably suffice

[aviral-clarifai]

@mirshko great solution! @faraz you could probably close this issue; this library already supports that feature in your own way without tying you to their implementation limits.

[ssngurjar]

@FarazPatankar you can use JSX solution as suggested by @aviral-clarifai. You can use JSX for handling the markup body. Closing the issue as it can be solved using JSX