Gathering detailed insights and metrics for react-toast-fly
Gathering detailed insights and metrics for react-toast-fly
ToastFly - A lightweight and customizable React toast notification library for smooth and stylish notifications.
Installations
npm install react-toast-flyDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
20.17.0
NPM Version
10.8.3
Score
58.7
Supply Chain
93.5
Quality
88.4
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
3
Unable to fetch Contributors
Languages
4
TypeScript
CSS
JavaScript
HTML
TypeScript (79.18%)
CSS (16.15%)
JavaScript (3.08%)
HTML (1.58%)
Developer
kindslayer
Download Statistics
Total Downloads
1,079
Last Day
1
Last Week
6
Last Month
98
Last Year
1,079
GitHub Statistics
25 Commits
1 Watching
3 Branches
3 Contributors
Bundle Size
27.33 kB
Minified
7.05 kB
Minified + Gzipped
Maintainers
2
Package Meta Information
Latest Version
0.0.15
Package Id
react-toast-fly@0.0.15
Unpacked Size
104.55 kB
Size
26.08 kB
File Count
28
NPM Version
10.8.3
Node Version
20.17.0
Publised On
07 Dec 2024
Total Downloads
Cumulative downloads
Total Downloads
1,079
Last day
-91.7%
1
Compared to previous day
Last week
-70%
6
Compared to previous week
Last month
444.4%
98
Compared to previous month
Last year
0%
1,079
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
ToastFly
ToastFly is a lightweight and customizable React toast notification library designed to deliver smooth and stylish notifications in your React applications.
Features
- Customizable: Easily adjust the look and behavior of notifications to match your application's design.
- Simple API: A straightforward API for triggering notifications.
- TypeScript Support: Built with TypeScript for better development experience and type safety.
- Flexible: Support for various toast types and progress indicators.
Installation
To install ToastFly, use npm or yarn:
1pnpm add react-toast-fly 2# or 3npm install react-toast-fly 4# or 5yarn add react-toast-fly
Usage
To use the react-toast-fly you need to install tailwind css first. All the styling are customizable with tailwind css.
Installation
we created a wrapper component and a toast function.
-
- ToastProvider: It provides a wrapper around all the components and it receives globalOptions props that provides the basics for the toast notifications. it provides all the option below.
1<ToastProvider 2 globalOption={{ 3 turn: true, 4 duration: 1000, 5 isStacked: true, 6 successIcon: SuccessIconComponent, 7 warningIcon: WarningIconComponent, 8 errorIcon: ErrorIconComponent, 9 infoIcon: InfoIconComponent, 10 direction: 'rtl' // ltr 11 }} 12> 13 {/*- children -*/} 14</ToastProvider>
- turn: if it sets to true, all the notifications are paused and only the last one will get an interval. when the last one is finished, the next one will get an interval
- duration: A straightforward API for triggering notifications.
- isStacked: Built with TypeScript for better development experience and type safety.
- direction: Support for various toast types and progress indicators.
- Icons: Easily adjust the look and behavior of notifications to match your application's design.
-
- push: this is a function that generates toast. you can call it on the client side of your react app to generate toast
1 <button 2 onClick={() => { 3 push({ 4 title: 'test', 5 duration: 1000, 6 progress: Progress.Both, 7 type: ToastType.SUCCESS, 8 content: 'example content', 9 duration:100, 10 id:"some id" 11 }) 12 }} 13>Show</button>
content and icons can be react components.
1 const ContentComponent = ()=>{ 2 return <div><strong>Content</strong></div> 3 } 4 5 <button 6 onClick={() => { 7 push({ 8 title: 'test', 9 duration: 1000, 10 progress: Progress.Both, 11 type: ToastType.SUCCESS, 12 content:ContentComponent, 13 }) 14 }} 15>Show</button>
Next js Installation
In order to work with next js app router, the ToastProvider needs to be imported in a client component and then the client component needs to be imported in the main layout. also the css needs to be imported as well
As an example
1'use client' 2import React, {ReactNode} from 'react'; 3import {useRouter} from "next/navigation"; 4import {ToastProvider} from "react-toast-fly"; 5import {NextUIProvider} from "@nextui-org/react"; 6import {ThemeProvider as NextThemesProvider} from "next-themes"; 7 8import "react-toast-fly/dist/style.css" 9 10export default function NextUiProvider({children}: { children: ReactNode }) { 11 const {push} = useRouter(); 12 return ( 13 <ToastProvider 14 globalOption={{ 15 turn: true, 16 isStacked: true, 17 }} 18 > 19 <NextUIProvider navigate={push}> 20 <NextThemesProvider forcedTheme="dark" attribute="class" defaultTheme="dark"> 21 {children} 22 </NextThemesProvider> 23 </NextUIProvider> 24 </ToastProvider> 25 ); 26} 27 28 29 30 In the Main layout of Next js App router 31 32 <html dir="rtl" lang="fa-IR" className={`${dana.variable} font-sans scroll-smooth dark`} style={{colorScheme: 'dark'}}> 33 <body> 34 <NextUiProvider> 35 <Main> 36 {children} 37 </Main> 38 </NextUiProvider> 39 </body> 40 </html> 41
No vulnerabilities found.
No security vulnerabilities found.