{"_id":"@digitalnology-oss/react-toast-notifications","_rev":"1-935abc494afbb5b813a0b0e33c9ac6d1","name":"@digitalnology-oss/react-toast-notifications","dist-tags":{"latest":"3.0.0"},"versions":{"3.0.0-beta.0":{"name":"@digitalnology-oss/react-toast-notifications","version":"3.0.0-beta.0","description":"A configurable, composable, toast notification system for react.","main":"dist/index.js","typings":"./index.d.ts","license":"MIT","author":{"name":"Joss Mackison","url":"https://github.com/jossmac"},"homepage":"https://jossmac.github.io/react-toast-notifications","repository":{"type":"git","url":"git+https://github.com/digitalnology/react-toast-notifications.git"},"bugs":{"url":"https://github.com/jossmac/react-toast-notifications/issues"},"keywords":["react","toast","toasts","notification","notifications"],"scripts":{"test":"echo \"Error: no test specified\" && exit 1","start":"webpack-dev-server --mode development","prettier_lint":"prettier --list-different \"**/*.js\"","eslint":"eslint .","lint":"yarn prettier_lint && yarn eslint","typecheck":"flow check","build":"cross-env NODE_ENV=production babel src -d dist --copy-files","prepublishOnly":"npm run build","build:examples":"webpack --mode production","deploy:examples":"gh-pages -d examples/dist","publish:examples":"npm run build:examples && npm run deploy:examples"},"prettier":{"proseWrap":"preserve","singleQuote":true,"trailingComma":"es5"},"dependencies":{"@emotion/core":"^10.0.14","react-transition-group":"^4.4.1"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-loader":"^7.1.4","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","cross-env":"^7.0.3","css-loader":"^0.28.11","file-loader":"^1.1.11","flow-bin":"^0.102.0","gh-pages":"^1.1.0","html-webpack-plugin":"^3.2.0","prettier":"^1.12.1","raw-loader":"^0.5.1","react":"^16.8.6","react-dom":"^16.8.6","react-radios":"^1.1.0","react-syntax-highlighter":"^7.0.4","style-loader":"^0.21.0","webpack":"^4.5.0","webpack-cli":"^2.0.14","webpack-dev-server":"^3.1.3"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"gitHead":"431b24b43ec182edf557a3452dafd6a509d8fef7","_id":"@digitalnology-oss/react-toast-notifications@3.0.0-beta.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-YxAjHS9VD/8DW9YuxsLJYkoDhNTilMtjPeqa8kRcUTqNnmh86YMZGcG1fTJnjs24bKURT6/RVs20otf/4P+8Eg==","shasum":"86a4b1837d5aaf24fda1b732a8c1ca3bf230e2ba","tarball":"https://registry.npmjs.org/@digitalnology-oss/react-toast-notifications/-/react-toast-notifications-3.0.0-beta.0.tgz","fileCount":16,"unpackedSize":51231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlqI3/56W2d7CoEm9lPEqIgy18z+PpGgnX2zzQqidA/gIhAOzOfO2OF3socRpKGfTOVEZdF6wZuQ2xSrU3cHvX4Zfy"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSpUoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpa+hAAhHkR4PLf4id1o7tm+iZNa1TnTZgswNN+O7BprR3SJme1RxUm\r\nEoa/t/Tjk5xASaWPfwLOt9lglXbzehLSCYkKhZ2mFxH0Qgq2yfI+2c8WhHsj\r\nsLhylMjJUNgEn8RxYgXJHlA875FrunuT8zbVguMSv3LnFGtw9wKOdYihyzaY\r\nNU6/OH8darlJMLzUl0zB9ILHnFzWeusPWUnYu865Yjliw9W4odBa1oX8w/y0\r\nIHBOmNRt5xhBRubPzVokLSlIZwf9i5BhPWHniGxVtVDHnF6UNd7LpxsEflyg\r\nIOs9oR6AjNKLfxL6qUkcX1/A5e+1cWbD6u7wc4Y/s1nTiOaTHiGXvXcaY4QE\r\nK/+pf4Vhx38CCW6V2kebnAboShhgqSVDXJhsQzmVgLp1h/JSHl52HV3qEC7O\r\nfunLzqbwEoIjW3oEv2Q9E+sQAx0jIgFIcdvj7Clt5d358L/ccRFuq4HF/jxC\r\n/o4sGZiToKbc2jew6lw9tzF1Oz0lHrXjJ5Wo1khkhsl1EP7zj/E9WMpic0xx\r\nLi6W8XiupH2eA71Emce9jciL2nFtu4xdjg5VhWHjeV04wSBIeo46oOGt11Wc\r\nRiB2+fFZ8dNNz5/Bh4EYSMi5h8MW9VYhWKEBE2aShpIYER5sJH1vFAIrexzu\r\nuA8y3mS2wqUcynbVcXjWVv5Sgw8H9lm/btw=\r\n=H3pT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aledigital","email":"alessandro.tilli@digitalnology.com"},"directories":{},"maintainers":[{"name":"aledigital","email":"alessandro.tilli@digitalnology.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-toast-notifications_3.0.0-beta.0_1682609447781_0.8413438304161784"},"_hasShrinkwrap":false},"3.0.0":{"name":"@digitalnology-oss/react-toast-notifications","version":"3.0.0","description":"A configurable, composable, toast notification system for react.","main":"dist/index.js","typings":"./index.d.ts","license":"MIT","author":{"name":"Joss Mackison","url":"https://github.com/jossmac"},"homepage":"https://jossmac.github.io/react-toast-notifications","repository":{"type":"git","url":"git+https://github.com/digitalnology/react-toast-notifications.git"},"bugs":{"url":"https://github.com/jossmac/react-toast-notifications/issues"},"keywords":["react","toast","toasts","notification","notifications"],"scripts":{"test":"echo \"Error: no test specified\" && exit 1","start":"webpack-dev-server --mode development","prettier_lint":"prettier --list-different \"**/*.js\"","eslint":"eslint .","lint":"yarn prettier_lint && yarn eslint","typecheck":"flow check","build":"cross-env NODE_ENV=production babel src -d dist --copy-files","prepublishOnly":"npm run build","build:examples":"webpack --mode production","deploy:examples":"gh-pages -d examples/dist","publish:examples":"npm run build:examples && npm run deploy:examples"},"prettier":{"proseWrap":"preserve","singleQuote":true,"trailingComma":"es5"},"dependencies":{"@emotion/core":"^10.0.14","react-transition-group":"^4.4.1"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-loader":"^7.1.4","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","cross-env":"^7.0.3","css-loader":"^0.28.11","file-loader":"^1.1.11","flow-bin":"^0.102.0","gh-pages":"^1.1.0","html-webpack-plugin":"^3.2.0","prettier":"^1.12.1","raw-loader":"^0.5.1","react":"^16.8.6","react-dom":"^16.8.6","react-radios":"^1.1.0","react-syntax-highlighter":"^7.0.4","style-loader":"^0.21.0","webpack":"^4.5.0","webpack-cli":"^2.0.14","webpack-dev-server":"^3.1.3"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"gitHead":"4eb87639f9764431a91d4681040146ab4347a915","_id":"@digitalnology-oss/react-toast-notifications@3.0.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-GM5O/Yx7Y2dLC27zGfh1fZcjisyt3l3pmLIo6/Qe2nHk1KITDeyBxYyXdIybyYZSK8g+8GbuCc5p6vt6JU3bVg==","shasum":"b2010ccc867d08032e0729fc144398faf62ecdd1","tarball":"https://registry.npmjs.org/@digitalnology-oss/react-toast-notifications/-/react-toast-notifications-3.0.0.tgz","fileCount":16,"unpackedSize":51222,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICxU7aTfpDP2h68XhMNpvV2pcm2rdWiy+KEisn5kS6Q7AiB4Itu9ZqZK1CSP1fO5OoMKRZVAcgAJ2ow3VWDCHLzKJw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSpkOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCuxAAiCUZz5pjAYGYCBubS3kwGFyfJNnWcYcU9f9JiGW5WjCOg+SQ\r\n9XLJi37t4aWXfXG2DlFfwB5sejcpIHEiPM2FHGqQik8UC+w9uJ4G37SILgH4\r\n88jruLrtvNlExiUB+0+eiprZqq1ho0VxljWao7SmG3JvbAw2Ck37tcCsMdQI\r\nPY6VWqgPtE5QqmE2rtk5UtdhM3ofqUlmeyhzC4LFRmz8vx1LVNvXrWAhkN+E\r\nUweLlOjJewbZi5YMUBxsn1ZdWUmaPDPyGj08iCWUq/dEqnZ9ix5+10nrSm0e\r\nrbWEN74Ad8lqvHkgS1vf7stPNbrHyDmaUHGENnf7BGQYfLzeQ33mi5EwHTHd\r\n2whYJbLP7fr4t7W0vlZCwQvfQousjGGIAxAt0S6l41WEwM0oMaFQbzIxQ858\r\nv/j8ozY016Jc/BjZROJGgP0L4yl0IlBPrbkTrxha6Ly+jh/tDJOy3qTCcqAi\r\nL6KfMWOr0ZRikt8Ywk9F+EYPAZXYtIxFkZFAF7R+0c/AHAPRmEh1OdRsNG7X\r\ne+xa97itaHJpy9lMrZc6DPbsIO/UTQURViaets1ZbC4+9+78WynKf0q6ryBP\r\noiRLYnPTK3VPX/jpWd9cgKCAXAEitmwFiv4+Aor+ZFN8Qxr7FNu3HHM0u77g\r\n9b5L6EZnS99ZZIJmwiimwVNrVoTb6e1Vt5Q=\r\n=Vilv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aledigital","email":"alessandro.tilli@digitalnology.com"},"directories":{},"maintainers":[{"name":"aledigital","email":"alessandro.tilli@digitalnology.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-toast-notifications_3.0.0_1682610445933_0.9493464128547844"},"_hasShrinkwrap":false}},"time":{"created":"2023-04-27T15:30:47.710Z","3.0.0-beta.0":"2023-04-27T15:30:48.023Z","modified":"2023-04-27T15:47:26.264Z","3.0.0":"2023-04-27T15:47:26.123Z"},"maintainers":[{"name":"aledigital","email":"alessandro.tilli@digitalnology.com"}],"description":"A configurable, composable, toast notification system for react.","homepage":"https://jossmac.github.io/react-toast-notifications","keywords":["react","toast","toasts","notification","notifications"],"repository":{"type":"git","url":"git+https://github.com/digitalnology/react-toast-notifications.git"},"author":{"name":"Joss Mackison","url":"https://github.com/jossmac"},"bugs":{"url":"https://github.com/jossmac/react-toast-notifications/issues"},"license":"MIT","readme":"# 🚨 Not Maintained\n\nThis was a great project to learn from and fulfilled the requirements it set out to. Unfortunately, I can no-longer give this project the time it needs. Consider [react-hot-toast](https://github.com/timolins/react-hot-toast) as an alternative, or look at the source and make your own 🎉 (there really isn't much to it).\n\n[![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/)\n\n---\n\n<img align=\"right\" src=\"https://user-images.githubusercontent.com/2730833/41197727-5e0b4d2e-6cab-11e8-9d0d-873d1f8ebced.png\" alt=\"react-toast-notifications\" />\n\n# React Toast Notifications\n\nA configurable, composable, toast notification system for react.\n\nhttps://jossmac.github.io/react-toast-notifications\n\n### Install\n\n```bash\nyarn add react-toast-notifications\n```\n\n### Use\n\nWrap your app in the `ToastProvider`, which provides context for the `Toast` descendants.\n\n```jsx\nimport { ToastProvider, useToasts } from 'react-toast-notifications';\n\nconst FormWithToasts = () => {\n  const { addToast } = useToasts();\n\n  const onSubmit = async value => {\n    const { error } = await dataPersistenceLayer(value);\n\n    if (error) {\n      addToast(error.message, { appearance: 'error' });\n    } else {\n      addToast('Saved Successfully', { appearance: 'success' });\n    }\n  };\n\n  return <form onSubmit={onSubmit}>...</form>;\n};\n\nconst App = () => (\n  <ToastProvider>\n    <FormWithToasts />\n  </ToastProvider>\n);\n```\n\n## ToastProvider Props\n\nFor brevity:\n\n- `PlacementType` is equal to `'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right'`.\n- `TransitionState` is equal to `'entering' | 'entered' | 'exiting' | 'exited'`.\n\n| Property                               | Description                                                                                |\n| -------------------------------------- | ------------------------------------------------------------------------------------------ |\n| autoDismissTimeout `number`            | Default `5000`. The time until a toast will be dismissed automatically, in milliseconds.   |\n| autoDismiss `boolean`                  | Default: `false`. Whether or not to dismiss the toast automatically after a timeout.       |\n| children `Node`                        | Required. Your app content.                                                                |\n| components `{ ToastContainer, Toast }` | Replace the underlying components.                                                         |\n| newestOnTop `boolean`                  | Default `false`. When true, insert new toasts at the top of the stack.  |\n| placement `PlacementType`              | Default `top-right`. Where, in relation to the viewport, to place the toasts.              |\n| portalTargetSelector `string`          | Which element to attach the container's portal to. Uses `document.body` when not provided. |\n| transitionDuration `number`            | Default `220`. The duration of the CSS transition on the `Toast` component.                |\n\n## Toast Props\n\n| Property                           | Description                                                              |\n| ---------------------------------- | ------------------------------------------------------------------------ |\n| appearance                         | Used by the default toast. One of `success`, `error`, `warning`, `info`. |\n| children                           | Required. The content of the toast notification.                         |\n| autoDismiss `boolean`              | Inherited from `ToastProvider` if not provided.                          |\n| autoDismissTimeout `number`        | Inherited from `ToastProvider`.                                          |\n| onDismiss: `Id => void`            | Passed in dynamically. Can be called in a custom toast to dismiss it.    |\n| placement `PlacementType`          | Inherited from `ToastProvider`.                                          |\n| transitionDuration `number`        | Inherited from `ToastProvider`.                                          |\n| transitionState: `TransitionState` | Passed in dynamically.                                                   |\n\n## Hook\n\nThe `useToast` hook has the following signature:\n\n```jsx\nconst {\n  addToast,\n  removeToast,\n  removeAllToasts,\n  updateToast,\n  toastStack,\n} = useToasts();\n```\n\nThe `addToast` method has three arguments:\n\n1.  The first is the content of the toast, which can be any renderable `Node`.\n1.  The second is the `Options` object, which can take any shape you like. `Options.appearance` is required when using the `DefaultToast`. When departing from the default shape, you must provide an alternative, compliant `Toast` component.\n1.  The third is an optional callback, which is passed the added toast `ID`.\n\nThe `removeToast` method has two arguments:\n\n1.  The first is the `ID` of the toast to remove.\n1.  The second is an optional callback.\n\nThe `removeAllToasts` method has no arguments.\n\nThe `updateToast` method has three arguments:\n\n1.  The first is the `ID` of the toast to update.\n1.  The second is the `Options` object, which differs slightly from the add method because it accepts a `content` property.\n1.  The third is an optional callback, which is passed the updated toast `ID`.\n\nThe `toastStack` is an array of objects representing the current toasts, e.g.\n\n```jsx\n[\n  {\n    content: 'Something went wrong',\n    id: 'generated-string',\n    appearance: 'error',\n  },\n  { content: 'Item saved', id: 'generated-string', appearance: 'success' },\n];\n```\n\n## Replaceable Components\n\nTo bring each toast notification inline with your app, you can provide alternative components to the `ToastProvider`:\n\n```jsx\nimport { ToastProvider } from 'react-toast-notifications';\n\nconst MyCustomToast = ({ appearance, children }) => (\n  <div style={{ background: appearance === 'error' ? 'red' : 'green' }}>\n    {children}\n  </div>\n);\n\nconst App = () => (\n  <ToastProvider components={{ Toast: MyCustomToast }}>...</ToastProvider>\n);\n```\n\nTo customize the existing component instead of creating a new one, you may import `DefaultToast`:\n\n```jsx\nimport { DefaultToast } from 'react-toast-notifications';\nexport const MyCustomToast = ({ children, ...props }) => (\n  <DefaultToast {...props}>\n    <SomethingSpecial>{children}</SomethingSpecial>\n  </DefaultToast>\n);\n```\n\n## Alternatives\n\nThis library may not meet your needs. Here are some alternative I came across whilst searching for this solution:\n\n- https://github.com/fkhadra/react-toastify\n- https://github.com/tomchentw/react-toastr\n- https://github.com/jesusoterogomez/react-notify-toast\n","readmeFilename":"README.md"}