{"_id":"react-toastline","name":"react-toastline","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"react-toastline","version":"0.1.0","description":"A tiny, zero-dependency, accessible toast notification system for React. Use it declaratively with hooks, or imperatively from anywhere in your app — even outside React components.","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./package.json":"./package.json"},"sideEffects":["**/*.css"],"scripts":{"build":"tsup && node scripts/copy-css.mjs","dev":"tsup --watch","test":"vitest run","test:watch":"vitest","typecheck":"tsc --noEmit","lint":"tsc --noEmit","prepublishOnly":"npm run typecheck && npm run test && npm run build"},"keywords":["react","toast","notifications","snackbar","alert","ui","accessible","a11y","hooks","headless"],"author":{"name":"Laiba Amin"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@testing-library/react":"^16.0.1","@types/react":"^18.3.5","@types/react-dom":"^18.3.0","jsdom":"^25.0.0","react":"^18.3.1","react-dom":"^18.3.1","tsup":"^8.2.4","typescript":"^5.5.4","vitest":"^2.0.5"},"repository":{"type":"git","url":"git+https://github.com/codecrafter-laiba/react-toastline.git"},"bugs":{"url":"https://github.com/codecrafter-laiba/react-toastline/issues"},"homepage":"https://github.com/codecrafter-laiba/react-toastline#readme","engines":{"node":">=16"},"publishConfig":{"access":"public"},"_id":"react-toastline@0.1.0","_nodeVersion":"26.3.1","_npmVersion":"11.16.0","dist":{"integrity":"sha512-Exr8NL+HmAFCS9CmX37nTyhKBnM0gq0rIWKBwO2WATAma7OhzN2UFsdCHm17DX7itoS2Z7dyqzrrftvOznGR5A==","shasum":"ef71c81ae05cb02fb63c265298d07fcd973949ec","tarball":"https://registry.npmjs.org/react-toastline/-/react-toastline-0.1.0.tgz","fileCount":10,"unpackedSize":63355,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDLayAWaC4BKFfX0zKcZzFrg+kHzsPxgoDXSPzDqcpVZAIhAMJDml4IPyWfU7cQgtUWt7Y2MdZIxfb6pY0fCHVY269T"}]},"_npmUser":{"name":"codecrafter-laiba","email":"laibaamin04@gmail.com"},"directories":{},"maintainers":[{"name":"codecrafter-laiba","email":"laibaamin04@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-toastline_0.1.0_1789290920776_0.022031936137497654"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-13T09:15:20.623Z","0.1.0":"2026-09-13T09:15:20.927Z","modified":"2026-09-13T09:15:21.180Z"},"maintainers":[{"name":"codecrafter-laiba","email":"laibaamin04@gmail.com"}],"description":"A tiny, zero-dependency, accessible toast notification system for React. Use it declaratively with hooks, or imperatively from anywhere in your app — even outside React components.","homepage":"https://github.com/codecrafter-laiba/react-toastline#readme","keywords":["react","toast","notifications","snackbar","alert","ui","accessible","a11y","hooks","headless"],"repository":{"type":"git","url":"git+https://github.com/codecrafter-laiba/react-toastline.git"},"author":{"name":"Laiba Amin"},"bugs":{"url":"https://github.com/codecrafter-laiba/react-toastline/issues"},"license":"MIT","readme":"# react-toastline\n\nA tiny, zero-dependency, accessible toast/notification system for React.\n\nUnlike most toast libraries, `react-toastline` works two ways:\n\n- **Declaratively**, via the `useToast()` hook.\n- **Imperatively**, by calling `toast()` from *anywhere* — an event handler, an axios/fetch interceptor, a Redux middleware, outside any component entirely. No hook required at the call site.\n\nOther things it does out of the box:\n\n- Zero runtime dependencies (only `react`/`react-dom` as peers)\n- Full TypeScript types\n- ESM + CJS builds\n- Accessible: `role=\"status\"`/`role=\"alert\"` + `aria-live`, keyboard-dismissible close button\n- Pause-on-hover so users can read a toast before it disappears\n- Respects `prefers-reduced-motion`\n- ~2KB gzipped (core logic has no dependencies at all)\n\n## Install\n\n```bash\nnpm install react-toastline\n```\n\n## Quick start\n\nMount `<ToastProvider />` once near the root of your app:\n\n```tsx\nimport { ToastProvider } from 'react-toastline';\nimport 'react-toastline/styles.css';\n\nexport function App() {\n  return (\n    <>\n      <YourApp />\n      <ToastProvider position=\"bottom-right\" />\n    </>\n  );\n}\n```\n\nThen fire toasts from anywhere:\n\n```tsx\nimport { toast } from 'react-toastline';\n\nfunction SaveButton() {\n  async function handleSave() {\n    try {\n      await saveThing();\n      toast.success('Saved!');\n    } catch (err) {\n      toast.error('Something went wrong.');\n    }\n  }\n\n  return <button onClick={handleSave}>Save</button>;\n}\n```\n\nIt also works outside components — e.g. a fetch wrapper:\n\n```ts\n// api.ts — no React import needed\nimport { toast } from 'react-toastline';\n\nexport async function apiFetch(url: string, init?: RequestInit) {\n  const res = await fetch(url, init);\n  if (!res.ok) {\n    toast.error(`Request failed: ${res.status}`);\n    throw new Error(String(res.status));\n  }\n  return res.json();\n}\n```\n\n## API\n\n### `<ToastProvider />`\n\n| Prop         | Type            | Default          | Description                          |\n| ------------ | --------------- | ----------------- | ------------------------------------ |\n| `position`   | `ToastPosition` | `'bottom-right'`  | Corner/edge the stack renders in     |\n| `maxVisible` | `number`        | `5`               | Cap on simultaneously visible toasts |\n| `container`  | `HTMLElement`   | `document.body`   | Portal mount node                    |\n\n`ToastPosition` is one of: `'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'`.\n\n### `toast(message, options?)`\n\nAlso available as `toast.success()`, `toast.error()`, `toast.info()`, `toast.warning()`.\n\n```ts\ninterface ToastOptions {\n  id?: string;        // reuse an id to update an existing toast in place\n  type?: ToastType;    // 'default' | 'success' | 'error' | 'info' | 'warning'\n  title?: string;\n  duration?: number;   // ms; 0 = persist until dismissed\n}\n```\n\nReturns the toast's `id`, which you can pass to `toast.dismiss(id)`.\n\n### `toast.dismiss(id)` / `toast.dismissAll()`\n\nDismiss one toast or clear the stack.\n\n### `useToast()`\n\n```ts\nconst { toasts, toast, dismiss, dismissAll } = useToast();\n```\n\nGives you the live array of active `ToastRecord`s, useful if you want to render your own notification UI instead of the built-in one.\n\n## Styling\n\nImport the default stylesheet, or write your own using the `.toastline-*` class names as a guide — they're intentionally simple and unminified. Colors are exposed as CSS variables on `.toastline-viewport` so you can theme without overriding rules:\n\n```css\n.toastline-viewport {\n  --toastline-bg: #111827;\n  --toastline-success: #16a34a;\n}\n```\n\n## Development\n\n```bash\nnpm install\nnpm run typecheck\nnpm test\nnpm run build\n```\n\n## Publishing this package yourself\n\n1. Update the `name`, `author`, and `repository` fields in `package.json` (the name must be unique on npm — check with `npm view <name>`).\n2. `npm login`\n3. `npm publish` (the `prepublishOnly` script runs typecheck + tests + build automatically)\n\nTo publish under a scope (e.g. `@yourname/react-toastline`) without making it private, keep `\"publishConfig\": { \"access\": \"public\" }` in `package.json`.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-8b4c5cd9786341753b65c882db2bf9a3"}