react-notificantion-toast
v1.0.10
Published
<!-- # React + JavaScript + Vite
Downloads
27
Maintainers
Readme
React + JavaScript + Vite
- react-notificantion-toast
React Notificantion Toast with Progressbar.
A brief description of my package and its key features.
Installation
You can install this package via npm. Run the following command:
- Using Node Package Manager (NPM)
npm i react-notificantion-toast
- Using Yarn
yarn add react-notificantion-toast
- Using PNPM
pnpm install react-notificantion-toast
How to use in react.js
First import useNotificantion hook from
react-notificantion-toast
your npm libraryThen initialize it and set a duration of this notificantion visibility for milliseconds, if you're not initialized it such as
useNotificantionToast(50000)
, then it take it's default value which are5000
like 5000ms or 5 seconds.Or you can use a
.env
's local variable for initialized this notificantion toast duration's value.When you call
const [active, Toast] = useNotificantionToast()
this function you got two returning variable which one notificantion toast activator function and other one is notificantion toast component which receive tow attributes of parametertype
&text
this two are takes definitely a string value.The
type
is receive some specific type of string which are indicate this notificantion's type.And the
text
receive an string which are the main message's text!All the message types are available on that present version are ----
["success", "danger", "warning", "primary", "download", "normal", "info", "dark"]
VITE_NOTIFICANTION_TOAST_DURATION = 5000 # 5s
import useNotificantionToast from 'react-notificantion-toast';
export default function App() {
const [active, Toast] = useNotificantionToast();
return (
<div>
<div>
<button
onClick={function () {
active((prevState) => !prevState);
}}
className="click"
>
click
</button>
</div>
<div>
<Toast
type="success"
text="Hi! I am from notificantion toast"
/>
</div>
</div>
);
}
Pleasure:
- I hope you are enjoy to use this library.
- Please give an github star, If it's really helpful for you!
- Support me on SYED AMIR ALI
- Thanks in advance & stay safe and keep safe.
- NPM