{"id":13421876,"url":"https://github.com/teodosii/react-notifications-component","last_synced_at":"2025-05-14T19:04:52.418Z","repository":{"id":39352230,"uuid":"138506796","full_name":"teodosii/react-notifications-component","owner":"teodosii","description":"Delightful and highly customisable React Component to notify your users","archived":false,"fork":false,"pushed_at":"2023-08-28T15:14:57.000Z","size":8003,"stargazers_count":1283,"open_issues_count":18,"forks_count":75,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-28T15:03:03.516Z","etag":null,"topics":["notifications","notifications-component","react","react-component","react-notifications","react-notifications-component","toast-component","toast-notifications"],"latest_commit_sha":null,"homepage":"https://teodosii.github.io/react-notifications-component/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/teodosii.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-06-24T18:43:40.000Z","updated_at":"2025-04-27T17:07:16.000Z","dependencies_parsed_at":"2024-04-17T10:53:17.976Z","dependency_job_id":"271b3ace-a835-42b3-885f-e930a573dba0","html_url":"https://github.com/teodosii/react-notifications-component","commit_stats":{"total_commits":323,"total_committers":16,"mean_commits":20.1875,"dds":"0.33436532507739936","last_synced_commit":"b5967f16db30d6beab53a2f731b2b37e9edd55d7"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teodosii%2Freact-notifications-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teodosii%2Freact-notifications-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teodosii%2Freact-notifications-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teodosii%2Freact-notifications-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teodosii","download_url":"https://codeload.github.com/teodosii/react-notifications-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251761988,"owners_count":21639731,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["notifications","notifications-component","react","react-component","react-notifications","react-notifications-component","toast-component","toast-notifications"],"created_at":"2024-07-30T23:00:33.287Z","updated_at":"2025-05-14T19:04:52.329Z","avatar_url":"https://github.com/teodosii.png","language":"TypeScript","funding_links":[],"categories":["UI Components","\u003csummary\u003eUI Components\u003c/summary\u003e","TypeScript"],"sub_categories":["Notification"],"readme":"[![npm version](https://badgen.net/npm/v/react-notifications-component)](https://www.npmjs.com/package/react-notifications-component) [![npm](https://img.shields.io/npm/dm/react-notifications-component.svg)](https://www.npmjs.com/package/react-notifications-component) [![Minified \u0026 Gzipped size](https://badgen.net/bundlephobia/minzip/react-notifications-component)](https://bundlephobia.com/result?p=react-notifications-component)\r\n# react-notifications-component\r\n\r\nA delightful, easy to use and highly configurable component to help you notify your users out of the box. No messy setup, just beautiful notifications!\r\n\r\n## Demo\r\n\r\nhttps://teodosii.github.io/react-notifications-component/\r\n\r\n![alt text](https://raw.githubusercontent.com/teodosii/react-notifications-component/master/github-preview.gif \"Preview\")\r\n\r\n## Features\r\n\r\n* Touch support\r\n* Responsive notifications\r\n* Standard notification types\r\n* Custom notification types\r\n* Custom notification content\r\n* Dismissable (touch, click, timeout)\r\n* Customizable transitions\r\n* Small library\r\n\r\n## Getting started\r\n```\r\nnpm install react-notifications-component\r\n```\r\n\r\n### Development\r\n\r\nFirst build the library\r\n```\r\nnpm run build:library:dev\r\n```\r\nthen run the webpack server to see the app running\r\n```\r\nnpm run start\r\n```\r\n\r\n## Usage\r\n\r\n###\r\n\r\nImport \u003ccode\u003ereact-notifications-component\u003c/code\u003e\r\n```js\r\nimport { ReactNotifications } from 'react-notifications-component'\r\n```\r\nImport the \u003ccode\u003eCSS\u003c/code\u003e theme\r\n```js\r\nimport 'react-notifications-component/dist/theme.css'\r\n```\r\n\r\n##### SASS\r\n\u003ccode\u003eSASS\u003c/code\u003e files are located in `react-notifications-component/dist/scss`\r\n\r\nRender \u003ccode\u003ereact-notifications-component\u003c/code\u003e at the top of your application so that it does not conflict with other absolutely positioned DOM elements.\r\n```jsx\r\nconst App = () =\u003e {\r\n  return (\r\n    \u003cdiv className=\"app-container\"\u003e\r\n      \u003cReactNotifications /\u003e\r\n      \u003cApplication /\u003e\r\n    \u003c/div\u003e\r\n  )\r\n};\r\n```\r\n\r\nImport \u003ccode\u003eStore\u003c/code\u003e where needed - will be used to access `addNotification` and `removeNotification` API methods\r\n```js\r\nimport { Store } from 'react-notifications-component';\r\n```\r\n\r\nThen call `addNotification` and watch the magic happens\r\n\r\n```jsx\r\nStore.addNotification({\r\n  title: \"Wonderful!\",\r\n  message: \"teodosii@react-notifications-component\",\r\n  type: \"success\",\r\n  insert: \"top\",\r\n  container: \"top-right\",\r\n  animationIn: [\"animate__animated\", \"animate__fadeIn\"],\r\n  animationOut: [\"animate__animated\", \"animate__fadeOut\"],\r\n  dismiss: {\r\n    duration: 5000,\r\n    onScreen: true\r\n  }\r\n});\r\n```\r\n\r\nVoila!\r\n\r\n**Note**: We rely on `animate.css` in this example as `animate__fadeIn` and `animate__fadeOut` are part of `animate.css`. We recommend using it as it's an excellent animation library, but you're not forced to. If you prefer you may also use your custom animations as long as they're valid CSS animations.\r\n\r\n**Note**: `animate.css` latest version (`v4`) has breaking changes. It introduces `animate__` prefix so that existing classes don't clash. If you still would like to use classes without prefix you can import `animate.css/animate.compat.css`\r\n```js\r\n// preferred way to import (from `v4`). Uses `animate__` prefix.\r\nimport 'animate.css/animate.min.css';\r\n\r\n// Alternate way to use classes without prefix like `animated fadeIn`\r\nimport 'animate.css/animate.compat.css'\r\n```\r\n\r\nIn the examples, we will be using classes with `animate__` prefix, which is the default behaviour of latest `v4` version of `animate.css`.\r\n\r\nFor more info on how to use `animate.css`, please refer to [animate.css docs](https://animate.style/)\r\n\r\n## API\r\n\r\n`Store.addNotification(options)`\r\n\r\nRender a new notification. Method returns a unique id for the rendered notification. Supplied options are internally validated and an exception will be thrown if validation fails.\r\n\r\n`Store.removeNotification(id)`\r\n\r\nManually remove a notification by id.\r\n\r\n\r\n## Examples\r\n\r\n\r\n\r\nIn the following examples for brevity some options will not be mentioned. Strictly focusing on the needed options to present each example. For reference, we will be using Object spread operator on a `notification` object to have non relevant fields included as well.\r\n\r\n```js\r\nnotification = {\r\n  title: \"Wonderful!\",\r\n  message: \"Configurable\",\r\n  type: \"success\",\r\n  insert: \"top\",\r\n  container: \"top-right\",\r\n  animationIn: [\"animate__animated animate__fadeIn\"], // `animate.css v4` classes\r\n  animationOut: [\"animate__animated animate__fadeOut\"] // `animate.css v4` classes\r\n};\r\n```\r\n\r\n#### Notification container\r\n\r\nYou have in total 6 containers for desktop and 2 for mobile, if component is set to be responsive. List of containers:\r\n\r\n* `top-left`\r\n* `top-right`\r\n* `top-center`\r\n* `center`\r\n* `bottom-left`\r\n* `bottom-right`\r\n* `bottom-center`\r\n\r\n```js\r\nStore.addNotification({\r\n  ...notification,\r\n  container: 'top-right'\r\n})\r\n```\r\n\r\nWill position the notification in top right of the screen.\r\n\r\n#### Notification type\r\n\r\nList of types:\r\n\r\n* `success`\r\n* `danger`\r\n* `info`\r\n* `default`\r\n* `warning`\r\n\r\n\r\n```js\r\nStore.addNotification({\r\n  ...notification,\r\n  type: 'danger'\r\n})\r\n```\r\n\r\nWill trigger a `danger` notification.\r\n\r\n#### Animating\r\n  \r\n```js\r\nStore.addNotification({\r\n  ...notification, \r\n  animationIn: ['animate__animated animate__fadeIn'], // `animate.css v4` classes\r\n  animationOut: ['animate__animated animate__fadeOut'] // `animate.css v4` classes\r\n})\r\n```\r\n\r\n`animationIn` and `animationOut` rely on CSS classes that toggle animations. On github pages we rely on `animate.css`, we suggest you to import that package and use their animations as they have plenty.\r\n\r\n**Note**: Failing to have animations set properly will lead to bugs in some causes, as `react-notifications-component` relies on `onAnimationEnd` event to know when an animation has finished.\r\n\r\n#### Dismiss notification automatically after timeout expires\r\n\r\n```js\r\nStore.addNotification({\r\n  ...notification,\r\n  dismiss: {\r\n    duration: 2000\r\n  }\r\n})\r\n```\r\n\r\n#### Dismiss notification automatically with the time left shown on UI\r\n\r\n```js\r\nStore.addNotification({\r\n  ...notification,\r\n  dismiss: {\r\n    duration: 2000,\r\n    onScreen: true\r\n  }\r\n})\r\n```\r\n\r\n#### Subscribe to notification's removal\r\n\r\nEasily subscribe to `onRemoval` by supplying callback as option to the notification object. Callback will get called after the removal animation finishes.\r\n\r\n```js\r\nStore.addNotification({\r\n  ...notification,\r\n  onRemoval: (id, removedBy) =\u003e {\r\n    ...\r\n  }\r\n})\r\n```\r\n\r\n#### Pause notification's timeout by hovering\r\n\r\n```js\r\nStore.addNotification({\r\n  ...notification,\r\n  dismiss: {\r\n    duration: 2000,\r\n    pauseOnHover: true\r\n  }\r\n})\r\n```\r\n\r\n#### Change transition\r\n\r\n```js\r\nStore.addNotification({\r\n  ...notification,\r\n  slidingExit: {\r\n    duration: 800,\r\n    timingFunction: 'ease-out',\r\n    delay: 0\r\n  }\r\n})\r\n```\r\n\r\n`slidingEnter`, `touchRevert` and `touchSlidingExit` can all be configured in the same way, with the mention that `touchSlidingExit` has 2 transitions nested.\r\n\r\n```js\r\nStore.addNotification({\r\n  ...notification,\r\n  touchSlidingExit: {\r\n    swipe: {\r\n      duration: 400,\r\n      timingFunction: 'ease-out',\r\n      delay: 0,\r\n    },\r\n    fade: {\r\n      duration: 400,\r\n      timingFunction: 'ease-out',\r\n      delay: 0\r\n    }\r\n  }\r\n})\r\n```\r\n\r\n## Props\r\n\r\n\u003ctable\u003e\r\n  \u003ctr\u003e\r\n    \u003cth\u003eName\u003c/th\u003e\r\n    \u003cth\u003eType\u003c/th\u003e\r\n    \u003cth\u003eDescription\u003c/th\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eisMobile\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eSet whether you want component to be responsive or not. To be used together with \u003ccode\u003ebreakpoint\u003c/codee\u003e\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003ebreakpoint\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eBreakpoint for responsiveness - defaults to \u003ccode\u003e768\u003c/code\u003epx\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003etypes\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eArray\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eCustom types\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eclassName\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eClasses assigned to the container\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eid\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eId of the container\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n\u003c/table\u003e\r\n\r\n## Options\r\n\r\n\u003ctable\u003e\r\n  \u003ctr\u003e\r\n    \u003cth\u003eName\u003c/th\u003e\r\n    \u003cth\u003eType\u003c/th\u003e\r\n    \u003cth\u003eDescription\u003c/th\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eid\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eId of the notification. Supply option only if you prefer to have custom id, otherwise you should let the component handle generation for you.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eonRemoval\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eFunction\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eGets called on notification removal with \u003ccode\u003eid\u003c/code\u003e and \u003ccode\u003eremovedBy\u003c/code\u003e arguments\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003etitle\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e, \u003ccode\u003eReact Node\u003c/code\u003e or \u003ccode\u003eFunctional Component\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eTitle of the notification. Option is ignored if \u003ccode\u003econtent\u003c/code\u003e is set, otherwise it is required.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003emessage\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e, \u003ccode\u003eReact Node\u003c/code\u003e or \u003ccode\u003eFunctional Component\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eMessage of the notification. Option is ignored if \u003ccode\u003econtent\u003c/code\u003e is set, otherwise it is required.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003econtent\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eObject\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eCustom notification content, must be either Class Component, Functional Component or React element. If being supplied as functional or class component, \u003ccode\u003eid\u003c/code\u003e and \u003ccode\u003enotificationConfig\u003c/code\u003e will be supplied as prop. \u003ccode\u003enotificationConfig\u003c/code\u003e will return the parsed notification object as defined in the library.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003etype\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eType of the notification. Option is ignored if \u003ccode\u003econtent\u003c/code\u003e is set, otherwise it is required.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003econtainer\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eContainer in which the notification will be displayed. Option is required.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003einsert\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eSpecify where to append notification into the container - top or bottom. Option defaults to \u003ccode\u003etop\u003c/code\u003e.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003edismiss\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eDismiss\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eSpecify how a notification should be dismissed.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eanimationIn\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eArray\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eArray of CSS classes for animating the notification's entrance.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eanimationOut\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eArray\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eArray of CSS classes for animating the notification's exit.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eslidingEnter\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eTransition\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eTransition to be used when sliding to show a notification.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eslidingExit\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eTransition\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eTransition to be used when sliding to remove a notification.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003etouchRevert\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eTransition\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eTransition to be used when sliding back after an incomplete swipe.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003etouchSlidingExit\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eTransition\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eTransition to be used when sliding on swipe.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003ewidth\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eOverwrite notification's \u003ccode\u003ewidth\u003c/code\u003e defined by CSS\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n\u003c/table\u003e\r\n  \r\n#### Transition\r\n\r\n\u003ccode\u003eTransition\u003c/code\u003e is used each time you define a transition.\r\n\r\n\u003ctable\u003e\r\n  \u003ctr\u003e\r\n    \u003cth\u003eName\u003c/th\u003e\r\n    \u003cth\u003eType\u003c/th\u003e\r\n    \u003cth\u003eDescription\u003c/th\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eduration\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eTransition duration in ms. Its default value ranges from 300 to 600, depending on transition\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003etimingFunction\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eCSS timing function for the transition, defaults to \u003ccode\u003elinear\u003c/code\u003e\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003edelay\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eDelay of the transition in ms, defaults to 0\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n\u003c/table\u003e\r\n\r\n#### Dismiss\r\n\r\n\u003ccode\u003eDismiss\u003c/code\u003e is used to describe how a notification should be dismissed.\r\n\r\n\u003ctable\u003e\r\n  \u003ctr\u003e\r\n    \u003cth\u003eName\u003c/th\u003e\r\n    \u003cth\u003eType\u003c/th\u003e\r\n    \u003cth\u003eDescription\u003c/th\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eduration\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eTime in milliseconds after notification gets dismissed. 0 will act as infinite duration. Defaults to \u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eonScreen\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eShow time left directly on the notification. Defaults to \u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003epauseOnHover\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eHovering over notification will pause the dismiss timer. Defaults to \u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003ewaitForAnimation\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eWhen removing a notification by default we trigger the exit animation and the transition to height 0 at the same time. Setting this to \u003ccode\u003etrue\u003c/code\u003e will wait for the exit animation to finish and then start the transition to height 0. Defaults to \u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eclick\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eEnable dismissal by click, defaults to \u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003etouch\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eEnable dismiss by touch move, defaults to \u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\u003ccode\u003eshowIcon\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\r\n    \u003ctd\u003eShow or hide the close icon, defaults to \u003ccode\u003efalse\u003c/code\u003e. If set to \u003ccode\u003etrue\u003c/code\u003e, it will respond to click interaction and will remove notification\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n\u003c/table\u003e\r\n  \r\n## Migration from v1\r\n\r\n* Ref usage has been deprecated. Import `Store` from library and use it for adding and removing notifications\r\n* `touchSlidingBack` has been renamed to `touchRevert`\r\n* Default values for transitions have been slightly changed\r\n* `dismissIcon` has been removed. Use `showIcon` instead. If you relly on customized close icon, then stick to custom content.\r\n* `dismiss` supports now more options\r\n* `cubicBezier` has been renamed to `timingFunction`\r\n* Validators are now no longer included in the prod build, they are only included in the dev build. If you inspect the npm package you will see that the component has 2 builds - `dev` and `prod` - and relies on ENV variable when importing.\r\n  \r\n## License\r\n\r\nMIT\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteodosii%2Freact-notifications-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteodosii%2Freact-notifications-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteodosii%2Freact-notifications-component/lists"}