Gathering detailed insights and metrics for react-toasts
Gathering detailed insights and metrics for react-toasts
Gathering detailed insights and metrics for react-toasts
Gathering detailed insights and metrics for react-toasts
npm install react-toasts
Typescript
Module System
Node Version
NPM Version
TypeScript (80.09%)
CSS (10.48%)
JavaScript (9.43%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
56 Stars
150 Commits
19 Forks
3 Watchers
7 Branches
5 Contributors
Updated on Jan 01, 2024
Latest Version
3.0.6
Package Id
react-toasts@3.0.6
Unpacked Size
132.50 kB
Size
43.04 kB
File Count
7
NPM Version
6.11.3
Node Version
12.11.1
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
react-toasts is a very simple and lightweight component to create toasts.
Demo url : https://vashnak.com/react-toasts/
1$ npm install -S react-toasts
You will need to import the ToastsContainer component and the ToastsStore.
1import {ToastsContainer, ToastsStore} from 'react-toasts'; 2 3function render(){ 4 return <div> 5 <button onClick={() => ToastsStore.success("Hey, you just clicked!")}>Click me</button> 6 <ToastsContainer store={ToastsStore}/> 7 </div> 8}
It is very easy to use. ToastsContainer is, as its name suggests, the toast container while ToastsStore is the toasts manager. The ToastsContainer must be linked to the ToastsStore, so we must set it as a parameter (see the code above). It will not work if you forget it!
Now you can simply call one of the 4 functions from the ToastStore (success, info, warning, error):
function n(message: string | HTMLElement, timer?: number = 3000, classNames?: string): void
Like this:
1ToastStore.success('Hey, it worked !');
The timer parameter is optional and its default value is 3000ms. The classNames parameter is also optional, if you have multiple classes to add, please separate them with a space ("class1 class2 ...").
The container can have 6 positions:
By default its position is BOTTOM_RIGHT. You can change it by using the enum ToastsContainerPosition
1<ToastContainer position={ToastsContainerPosition.TOP_LEFT}/>
If you want the toasts to have a light background, add the lightBackground
property to the ToastsContainer component.
1<ToastContainer position={ToastContainer.POSITION.TOP_LEFT} lightBackground/>
Prepared the package.json file to migrate from react-toasts to @vashnak/react-toasts (will be up with version 4.0.0)
Updated types, fix dependencies vulnerabilities, removed react/react-dom from dev-dependencies and added them into peerDependencies.
Rewrite with typescript, updated typos, optimized build, now support HTML in toast messages.
Can now add custom classes to toasts.
Added a class on each toasts.
Now support line break in toasts (\n).
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 3/7 approved changesets -- score normalized to 4
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
security policy file not detected
Details
Reason
license file not detected
Details
Reason
project is not fuzzed
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
33 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More