README
Getting stated with react-simple-toastify
react-simple-toastify is a simple library for displaying notifications in your application
Installation
For installing this library you should use npm.
npm install react-simple-toastify
or
npm i react-simple-toastify
Usage
It's very simple to setup this library, you have to follow the following steps below.
Step 1.
You have to import and set up one Provider of context in your application, where you want to display toasts. Assuming that you have an App component which is your main component that contains all the rest of yours other components. You must put all other elements or components inside a Provider component named 'ToastProdvider', which contains global declaration of data that will be access anywhere in the app.
Import
import {ToastProvider} from 'react-simple-toastify'
Creation of App component and setup the Provider
const App = () => {
return (
<ToastProvider>
{
// here you can put anything you want...
}
<ToastProvider>
)
}
export default App
Step 2.
Now, you need to add some options prop to the ToastProvider. This component takes only one prop.
Set up Let's consider the following options
const toastOptions = {
position: "top" || "center" || "bottom",
timeout: 1000
}
Explanation of the Option | properties | type | default | description | | --- | --- | --- | --- | | position | String | "bottom" | set the position of the toast on the screen | | timeout | Number | 1000 | set the delay time before masking the toast |
Insertion of options to the ToastProvider Component
const App = () => {
// some options
const toastOptions = {
position: "bottom",
timeout: 1000
}
return (
<ToastProvider options={toastOptions}>
{
// here you can put anything you want...
}
<ToastProvider>
)
}
export default App
It's ok, you have correctly setup the toast system in your application, Congrats ... Now, you can display toast everywhere in your application
Step 3.
Now, you are ready to display toast. Suppose that you have another component named TestComponent. Let's see how we can easily display toast.
With Function component
import React, {useContext} from 'react'
import {ToastContext} from 'react-simple-toastify'
const TestComponent = () => {
/**
* Here we destructure the displayToast from ToastContext
**/
const {displayToast} = useContext(ToastContext)
return (
<div>
{
// other elements here
}
<button onClick={() => displayToast("Hello World !")}>display Toast</button>
</div>
)
}
export default TestComponent
With Class Component
import React from 'react'
import {ToastContext} from 'react-simple-toastify'
class TestComponent extends React.Component {
render() {
const {displayToast} = this.context
return (
<div>
{
// other elements here
}
<button onClick={() => displayToast("Hello World !")}>display Toast</button>
</div>
)
}
}
TestComponent.contextType = ToastContext
export default TestComponent
Explanation
When you call the displayToast() function, by passing the message as argument, the toast will be displayed and will disappear after the number of milliseconds define in the configuration of the ToastProvider. This function takes only one argument, which is the message to display.