{"library":"react-quick-notify","title":"React Quick Notify","description":"React Quick Notify is a modern, customizable toast notification system designed for React applications, providing a clean UI without requiring external CSS frameworks like Tailwind CSS from version 0.1.x onwards. It ships with full TypeScript support, ensuring type safety for developers. The package, currently at version 0.1.20, focuses on lightweight performance, responsiveness, and extensive customizability, including multiple toast types (success, error, warning, info), configurable positioning, auto-dismiss duration, and smooth animations. While it previously utilized Tailwind CSS, recent versions embed their own styling, simplifying integration. It offers a clear API through a `ToastProvider`, `ToastContainer`, and the `useToast` hook, making it straightforward to implement global or component-specific notifications.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-quick-notify"],"cli":null},"imports":["import { ToastProvider } from 'react-quick-notify';","import { useToast } from 'react-quick-notify';","import { ToastContainer } from 'react-quick-notify';","import 'react-quick-notify/dist/toast.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { ToastProvider, ToastContainer, useToast } from 'react-quick-notify';\nimport 'react-quick-notify/dist/toast.css';\n\nfunction MyComponent() {\n  const { toast } = useToast();\n\n  const handleSuccess = () => {\n    toast.success('Operation completed successfully!');\n  };\n\n  const handleError = () => {\n    toast.error('Something went wrong!');\n  };\n\n  const handleWarning = () => {\n    toast.warning('Please check your input.');\n  };\n\n  const handleInfo = () => {\n    toast.info('Here is some information.');\n  };\n\n  return (\n    <div style={{ padding: '20px', display: 'flex', gap: '10px', flexDirection: 'column' }}>\n      <h3>Toast Examples</h3>\n      <button onClick={handleSuccess}>Show Success Toast</button>\n      <button onClick={handleError}>Show Error Toast</button>\n      <button onClick={handleWarning}>Show Warning Toast</button>\n      <button onClick={handleInfo}>Show Info Toast</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ToastProvider config={{ position: 'top-right', duration: 3000, maxToasts: 5, reverseOrder: true }}>\n      <div className=\"App\">\n        <MyComponent />\n        <ToastContainer />\n      </div>\n    </ToastProvider>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Demonstrates setting up `ToastProvider` and `ToastContainer` at the root of a React application, and then using the `useToast` hook within a component to display different types of notifications.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}