A simple nextjs toast component

This toast component can be used on nextjs projects or any other react project which uses style-jsx.

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.notify( msg, { options } )

check option section to learn more

To remove toast

toast.remove()

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-toast
import { toast, ToastContainer } from 'react-nextjs-toast'

// Your react component
class Card extends React.Component {

  // something ...

  // call toast.notify() here
  onClickNotify = () => {
    toast.notify(`Hi, I am a toast!`)
  }

  render(){
    return (<div>
    
        {/** Add toast component **/}
        <ToastContainer />

        
        <button
          onClick={this.onClickNotify} {/** call on click handler **/}
        >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 align={"right"} position={"top"} id="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

Miscellaneous