If you want to send toasts from anywhere in the application, you need to first wrap your application with it. Inside, we use context and custom hooks to allow triggering new toasts.
import Toaster from "./Toaster";
const App = () => {
return <Toaster>...</Toaster>;
};
If you want to send toasts from anywhere in the application, you need to first wrap your application with it. Inside, we use context and custom hooks to allow triggering new toasts.
type
accepts success
, warning
and danger
.
Pass any message
, it will work fine with one line but also adapt with height for longer messages.
If you do not specify duration
, it will default to 6 seconds (6000ms).
import { useToast } from "./Toaster/hooks";
const MyComponent = () => {
const { triggerToast } = useToast();
const handleSubmit = async () => {
// ...some async code
triggerToast({
type: "success",
message: "Form updated successfully",
duration: 5000,
});
};
};
You can see usage example in Form
component, which is shown when you run the application in this repo
To see the example, run npm i
and npm start
from the terminal or use the codesandbox to see it immidiately in your browser.
State is stored in context ToasterContext
, which is abstracted away with toastReducer
via custom hooks: useToast
and useToastInternal
.
useToast
is for usage inside the application logic, as explained above in the usage example.
useToastInternal
, however provides a list, notifications
and a closeToast
which are used inside the Toasts
component, where the React Portal is created to host our toasts. These two drive the toasts rendering and closing logic. Lastly, there is Toast
component, which is the UI implementation of a toast notification.
Toast
and it's parent, Toasts
are styled with styled-components library and their styles live in the same folder with styles.js
name.