Skip to main content

Render anything

You can render any valid ReactNode: string, number, component... This is really straightforward.

Basic example​

Important

When you render a component, a closeToast prop and the toastProps are injected into your component.

import React from "react";
import { ToastContainer, toast } from "react-toastify";

const Msg = ({ closeToast, toastProps }) => (
<div>
Lorem ipsum dolor {toastProps.position}
<button>Retry</button>
<button onClick={closeToast}>Close</button>
</div>
);

function App() {
const displayMsg = () => {
toast(<Msg />);
// toast(Msg) would also work
};

return (
<div>
<button onClick={displayMsg}>Click me</button>
<ToastContainer />
</div>
);
}

You can also render a component using a function. More or less like a "render props":

toast(({ closeToast }) => <div>Functional swag 😎</div>);

Custom implementation example (TS)​

export const Msg = ({ title, text }) => {
return (
<div className="msg-container">
<p className="msg-title">{title}</p>
<p className="msg-description">{text}</p>
</div>
);
};

const toaster = (myProps, toastProps): Id =>
toast(<Msg {...myProps} />, { ...toastProps });

toaster.success = (myProps, toastProps): Id =>
toast.success(<Msg {...myProps} />, { ...toastProps });

// ...the other notification types

// use it
toaster.success(
{
title: "You did it!",
text: "Good job!",
},
{ autoClose: false }
);

Example with react context πŸš€β€‹

In this example we will use react context to share state accross a component and a toast. Increment and display a toast at the same time to see how the state stay in sync !

import React from "react";
import { ToastContainer, toast } from "react-toastify";

const CountContext = React.createContext(null);

function useCount() {
const context = React.useContext(CountContext);
return context;
}

function CountProvider(props) {
const [count, setCount] = React.useState(0);

return <CountContext.Provider value={[count, setCount]} {...props} />;
}

function Counter() {
const [count, setCount] = useCount();
const increment = () => setCount((c) => c + 1);

return <Button onClick={increment}>Increment {count}</Button>;
}

function CountDisplay() {
const [count] = useCount();
return <div>The current counter count is {count}</div>;
}

export const ContextExample = () => {
const displayToast = () => {
toast(<CountDisplay />);
};

return (
<CountProvider>
<Container>
<Counter />
<Button onClick={displayToast}>Display toast</Button>
</Container>
<ToastContainer autoClose={false} draggable={false} />
</CountProvider>
);
};
Important

When you want to use a hook inside a toast you must do toast(<YourComponent />).

toast(YourComponent) would not work because there is no way to know that this is a react element