react-lite-toast
v1.0.9
Published
A minimal and lite toast notification for react
Downloads
11
Readme
react-lite-toast ⚡
A minimal and lite toast notification for react ⚡.
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
Release
You can view the latest release note here
Inspiration
License
MIT © ajinkabeer