react-flash-toast v1.0.2
A versatile and customizable toast notification library for React with seamless integration and a variety of notification styles.
Installation
Install the package using npm:
npm install react-flash-toast
Or using yarn:
yarn add react-flash-toast
Usage
1. Wrap your app with ToastProvider
First, wrap your main application component with the ToastProvider
:
import { ToastProvider } from "react-flash-toast";
const App = () => {
return (
<ToastProvider>
<YourAppContent />
</ToastProvider>
);
};
By default, toasts will appear in the top-center
position. You can override this using the defaultPosition
prop:
<ToastProvider defaultPosition="top-right">
<YourAppContent />
</ToastProvider>
Available positions are:
- "top-left"
- "top-center"
- "top-right"
- "bottom-left"
- "bottom-center"
- "bottom-right"
2. Use the toast function
Import the toast
function in any component where you want to trigger a toast notification:
import { toast } from "react-flash-toast";
const ToastDemo = () => {
const displayCustomToast = () => {
toast({
title: "Welcome Back!",
description: "You have successfully logged in.",
duration: 3000,
type: "info",
content: (
<>
<p>Enjoy the new features and enhancements.</p>
<a href="/upgrade" style={{ color: "#00ffae", fontWeight: "bold" }}>
Upgrade to Pro
</a>
</>
),
style: {
background: "#1e90ff",
color: "#fff",
border: "1px solid #00ffae",
borderRadius: "8px",
padding: "16px",
},
});
};
return <button onClick={displayCustomToast}>Show Custom Toast</button>;
};
Toast Options
The toast
function accepts an object with the following properties:
Property | Type | Default | Description |
---|---|---|---|
title | string | - | The main title of the toast notification. |
description | string | - | A brief description or additional information. |
content | React.ReactNode | - | Custom content to be rendered within the toast. |
type | string | "success" | Predefined toast types: "success", "error", "info", "warning", "default". |
duration | number | 3000 | Time in milliseconds for which the toast will be displayed. |
style | object | - | Custom styles to be applied to the toast container. |
Examples
Basic Success Toast
toast({
title: "Success!",
description: "Your action was completed successfully.",
type: "success",
});
Error Toast with Custom Duration
toast({
title: "Error",
description: "Something went wrong. Please try again.",
type: "error",
duration: 5000, // 5 seconds
});
Info Toast with Custom Styling
toast({
title: "Did you know?",
description: "You can customize the appearance of these toasts!",
type: "info",
style: {
background: "linear-gradient(to right, #00c6ff, #0072ff)",
color: "white",
borderRadius: "10px",
},
});
Custom Content Toast
toast({
type: "default",
content: (
<div>
<h3>Custom Content</h3>
<p>You can add any React components here!</p>
<button onClick={() => console.log("Button clicked!")}>Click me</button>
</div>
),
});
Toast with Custom Position
toast({
title: "Custom Position",
description: "This toast appears in a specific position.",
type: "info",
position: "bottom-right",
});
Customizing Default Behavior
You can customize the default behavior of all toasts by passing props to the ToastProvider
:
<ToastProvider defaultPosition="bottom-center">
<YourAppContent />
</ToastProvider>
This sets all toasts to appear at the bottom-center position by default, unless overridden in individual toast calls.
Accessibility
React Flash Toast is designed with accessibility in mind:
- Toasts are announced to screen readers.
- Keyboard navigation is supported for dismissing toasts.
- Color contrasts meet WCAG 2.1 guidelines.
Support
If you encounter any issues or have questions, please file an issue on the GitHub repository.
License
React Flash Toast is MIT licensed.
Contributing
Contributions are welcome! Please open an issue or submit a pull request if you'd like to contribute to this project.