A simple nextjs toast component
This toast component can be used on nextjs projects or any other react project which uses style-jsx.
DEMO
Installation
Using npm
npm install react-nextjs-toast
Using yarn
yarn add react-nextjs-toast
How to use
The component is very simple to use. Just follow the instructions.
Add toast container component
import ToastContainer from 'react-nextjs-toast' //... <ToastContainer />//...
To show toast
toast
check option section to learn more
To remove toast
toast
Let's assume you have a react component where you want to use the toast component to notify a user about certain event.
import React from 'react' // import toast object and toast container from react-nextjs-toastimport toast ToastContainer from 'react-nextjs-toast' // Your react componentComponent // something ... // call toast.notify() here { toast } { return <div> /** Add toast component **/ <ToastContainer /> <button = >Notify</button> </div> }
Toast container props
props | description | Data Type |
---|---|---|
align | left, center, right | String |
position | top, bottom | String |
id | Container id ( must be unique ) | String |
For example to show toast at the top right
<ToastContainer = = ="toast-comp-3"/>
Toast Options
The toast has 4 types of default events - info, success, error and warning and also supports custom duration.
property | description | Data Type |
---|---|---|
duration | Number of seconds to show toast on screen | Integer |
type | Type of toast - info, error, success and warning | String |
title | The title of the toast | String |
targetId | Target container id | String |
position | top , bottom | String |
default value is bottom |
For example, to show success toast that lasts for 5 seconds.
toast.notify('This is a success toast', {
duration: 5,
type: "success"
})
Todo
- Custom design
- Toast stacking