1.0.2 âĒ Published 6 months ago
react-toast-notify-ks v1.0.2
React Toast Notification ð
A lightweight, customizable toast notification system for React applications built with TypeScript and Vite.
Features âĻ
- ð Easy to integrate with React applications
- ðĻ Multiple toast types (success, error, warning, info)
- ð Customizable styling and positioning
- âĻïļ Full TypeScript support
- ðŠķ Lightweight and performant
- ðą Responsive design
- âąïļ Configurable toast duration
Installation ðĶ
npm install @react-toast-notify-ks
# or
yarn add @react-toast-notify-ks
Quick Start ð
1. Wrap Your App with ToastProvider
import { ToastProvider } from '@react-toast-notify-ks';
function App() {
return (
<ToastProvider>
<YourMainComponent />
</ToastProvider>
);
}
2. Use Toast in Components
import { useToast } from '@react-toast-notify-ks';
function ExampleComponent() {
const toast = useToast();
const handleShowToasts = () => {
// Basic usage
toast.success('Operation Successful!');
toast.error('Something went wrong');
// Custom configuration
toast.warning('Warning message', {
duration: 5000, // 5 seconds
position: 'top-right'
});
};
return (
<div>
<button onClick={handleShowToasts}>
Show Toasts
</button>
</div>
);
}
Advanced Configuration ð ïļ
Toast Types
toast.success()
: Green success notificationtoast.error()
: Red error notificationtoast.warning()
: Yellow warning notificationtoast.info()
: Blue informational notification
Options
message
: Notification text (required)duration
: Display time in milliseconds (default: 3000)position
: Toast screen positiontop-right
(default)top-left
bottom-right
bottom-left
top-center
bottom-center
Best Practices ðĄ
- Use appropriate toast types
- Keep messages concise
- Don't overwhelm users with too many notifications
- Use for important, non-critical information
Development ð§
# Clone the repository
git clone [https://github.com/sankarkumark34/react-toast-notify.git]
# Install dependencies
npm install
# Start development server
npm run dev
# Build the library
npm run build
# Run tests
npm test
Contributing ðĪ
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
License ð
Distributed under the MIT License. See LICENSE
for more information.
Contact ðŽ
sankar- @LinkedIn
Project Link: https://github.com/sankarkumark34/react-toast-notify.git