Gathering detailed insights and metrics for react-toast-fly
Gathering detailed insights and metrics for react-toast-fly
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.
npm install react-toast-fly
Typescript
Module System
Node Version
NPM Version
66.8
Supply Chain
92.3
Quality
84.5
Maintenance
100
Vulnerability
100
License
TypeScript (79.6%)
CSS (15.83%)
JavaScript (3.02%)
HTML (1.55%)
Total Downloads
1,307
Last Day
1
Last Week
1
Last Month
15
Last Year
1,307
MIT License
26 Commits
1 Watchers
3 Branches
3 Contributors
Updated on Feb 12, 2025
Minified
Minified + Gzipped
Latest Version
0.0.16
Package Id
react-toast-fly@0.0.16
Unpacked Size
104.87 kB
Size
26.36 kB
File Count
28
NPM Version
10.9.0
Node Version
22.12.0
Published on
Feb 12, 2025
Cumulative downloads
Total Downloads
Last Day
0%
1
Compared to previous day
Last Week
-50%
1
Compared to previous week
Last Month
-25%
15
Compared to previous month
Last Year
0%
1,307
Compared to previous year
ToastFly is a lightweight and customizable React toast notification library designed to deliver smooth and stylish notifications in your React applications.
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
To use the react-toast-fly you need to install tailwind css first. All the styling are customizable with tailwind css.
we created a wrapper component and a toast function.
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>
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>
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>
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.