A minimal and lite toast notification for react ⚡.

Live Demo

UI

Install

npm install --save react-lite-toast

or

yarn add react-lite-toast

Usage

import React, { useState } from 'react'
import { Toast } from 'react-lite-toast'
import 'react-lite-toast/dist/index.css'

const App = () => {
  const [toast, setToast] = useState(false)
  return (
    <div>
      <button onClick={() => setToast(!toast)}>Click me</button>
      {toast && <Toast type="success" title="Completed" description="Flippity flip" position="bottomup" duration={1500} />}
    </div>
  )
}

export default App

or

import React, { Component } from "react";
import { Toast } from "react-lite-toast";
import "react-lite-toast/dist/index.css";

class App extends Component {
  state = {
    toast: false
  };

  setToast = () => {
    this.setState(prevState => ({
      toast: !prevState.toast
    }));
  };

  render() {
    return (
      <>
        <button onClick={() => this.setToast()}>Click me</button>
        {this.state.toast && (
          <Toast
            type="success"
            title="Completed"
            description="Flippity flip"
            position="bottomup"
            duration={1500}
          />
        )}
      </>
    );
  }
}

export default App;

Props

Prop	Description
type string	Required. One of success, error, warning, info
title string	Required. The title of the toast notifaction.
description string	Required: The content of the toast notification
position: string	Required. One of bottomup, topdown, topleft, topright,bottomleft, bottomright
duration number	Required: The total time duration of toast. i.e, 1500
closeButton boolean	Optional: default to false.

Contributors

• Ajin Kabeer

Release

You can view the latest release note here

Inspiration

• Chakra-UI Toast
• LogRocket Blog

License

MIT © ajinkabeer