{"id":15039030,"url":"https://github.com/louisbarranqueiro/reapop","last_synced_at":"2025-04-09T11:03:06.089Z","repository":{"id":37551590,"uuid":"56515832","full_name":"LouisBarranqueiro/reapop","owner":"LouisBarranqueiro","description":":postbox: A simple and customizable React notifications system","archived":false,"fork":false,"pushed_at":"2024-07-07T19:02:00.000Z","size":67625,"stargazers_count":1552,"open_issues_count":3,"forks_count":78,"subscribers_count":9,"default_branch":"main","last_synced_at":"2024-10-29T15:11:01.394Z","etag":null,"topics":["notification","notifications","react","reapop","redux","redux-notifications","toast","toasts"],"latest_commit_sha":null,"homepage":"https://louisbarranqueiro.github.io/reapop","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/LouisBarranqueiro.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2016-04-18T14:42:12.000Z","updated_at":"2024-10-29T07:09:09.000Z","dependencies_parsed_at":"2023-02-15T20:15:44.568Z","dependency_job_id":"f6f63d9d-088c-4f2b-93b1-a4826179818d","html_url":"https://github.com/LouisBarranqueiro/reapop","commit_stats":{"total_commits":1958,"total_committers":21,"mean_commits":93.23809523809524,"dds":0.6179775280898876,"last_synced_commit":"3a3b68a1e14ea619291bd47e9509d2d1bf658923"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisBarranqueiro%2Freapop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisBarranqueiro%2Freapop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisBarranqueiro%2Freapop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisBarranqueiro%2Freapop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LouisBarranqueiro","download_url":"https://codeload.github.com/LouisBarranqueiro/reapop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027402,"owners_count":21035594,"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":["notification","notifications","react","reapop","redux","redux-notifications","toast","toasts"],"created_at":"2024-09-24T20:41:20.302Z","updated_at":"2025-04-09T11:03:06.073Z","avatar_url":"https://github.com/LouisBarranqueiro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reapop\n[![npm version](https://img.shields.io/npm/v/reapop.svg?style=flat-square)](https://www.npmjs.com/package/reapop) [![npm download/month](https://img.shields.io/npm/dm/reapop.svg?style=flat-square)](https://www.npmjs.com/package/reapop) [![coveralls status](https://img.shields.io/codecov/c/gh/LouisBarranqueiro/reapop?style=flat-square\u0026token=U4UGNWVI0Q)](https://codecov.io/gh/LouisBarranqueiro/reapop)\n\nA simple and customizable React notifications system\n\n## Summary\n\n* [Compatibility](#compatibility)\n* [Demo](#demo)\n* [Installation](#installation)\n* [Integration \u0026 usage](#integration--usage)\n    * [With React \u0026 Redux](#with-react-and-redux)\n    * [With React alone](#with-react-alone-react--1680)\n* [Documentation](#documentation)\n* [License](#license)\n\n## Compatibility\n\n### Supported browsers\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera |\n| --------- | --------- | --------- | --------- | --------- |\n| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions\n\n## Demo\n\nCheck out the [demo](https://louisbarranqueiro.github.io/reapop/).\n\n## Installation\n\n```\nnpm install reapop --save\n```\n\n## Integration \u0026 usage\n\n### With React and Redux\n\n1 - Add the notifications reducer to your Redux store.\n\n``` js\nimport {combineReducers, createStore} from 'redux'\nimport {reducer as notificationsReducer} from 'reapop'\n\nconst rootReducer = combineReducers({\n    notifications: notificationsReducer(),\n    ... your other reducers\n})\nconst store = createStore(rootReducer)\n```\n\n\n2 - Add the `NotificationsSystem` component to your app. Place this component at the root of your application to avoid position conflicts.\n\n``` jsx\nimport React from 'react'\nimport {useDispatch, useSelector} from 'react-redux'\nimport NotificationsSystem, {atalhoTheme, dismissNotification} from 'reapop'\n\nconst ATopLevelComponent = () =\u003e {\n    const dispatch = useDispatch();\n    // 1. Retrieve the notifications to display.\n    const notifications = useSelector((state) =\u003e state.notifications)\n    \n    return (\n        \u003cdiv\u003e\n            \u003cNotificationsSystem\n                // 2. Pass the notifications you want Reapop to display.\n                notifications={notifications}\n                // 3. Pass the function used to dismiss a notification.\n                dismissNotification={(id) =\u003e dispatch(dismissNotification(id))}\n                // 4. Pass a builtIn theme or a custom theme.\n                theme={atalhoTheme}\n            /\u003e\n        \u003c/div\u003e\n    )\n}\n```\n\n3 - Set default notifications attributes\n\n``` js\nimport {setUpNotifications} from 'reapop'\n\n// run this function when your application starts before creating any notifications\nsetUpNotifications({\n    defaultProps: {\n        position: 'top-right',\n        dismissible: true\n    } \n})\n```\n\n4 - Upsert or dismiss notification from any React components.\n\n``` jsx\nimport React from 'react'\nimport {useDispatch} from 'react-redux'\n// 1. Retrieve the action to create/update a notification, or any other actions.\nimport {notify} from 'reapop'\n\nconst AComponent = () =\u003e {\n    // 2. Retrieve the function to dispatch an action.\n    const dispatch = useDispatch() \n    useEffect(() =\u003e {\n        // 3. Create a notification.\n        dispatch(notify('Welcome to the documentation', 'info'))\n    }, [])\n\n    return (\n        ...\n    )\n}\n```\n\n5 - Upsert or dismiss notification from Redux actions.\n\n``` js\n// 1. Retrieve the action to create/update a notification.\nimport {notify} from 'reapop'\n\nconst sendResetPasswordLink = () =\u003e (dispatch) =\u003e {\n    axios.post('https://api.example.com/users/ask-reset-password')\n        // 2. Create a notification.\n        .then((resp) =\u003e dispatch(notify(resp.data.detail, 'success'))\n        .catch((resp) =\u003e dispatch(notify(resp.data.detail, 'error'))\n    }\n}\n```\n\n### With React alone (react \u003e= 16.8.0)\n\n1 - Add the `NotificationsProvider` at the root of your application. \nIt is important that this component wraps all the components \nwhere you want to access the notifications and the actions to manipule notifications.\n\n``` jsx\nimport React from 'react'\nimport {NotificationsProvider} from 'reapop'\n\nconst ARootComponent = () =\u003e {\n    return (\n        \u003cNotificationsProvider\u003e\n            // ... components\n        \u003c/NotificationsProvider\u003e\n    )\n}\n```\n\n\n2 - Add the `NotificationsSystem` component to your app. Place this component at the root of your application to avoid position conflicts.\n\n``` jsx\nimport React from 'react'\nimport NotificationsSystem, {atalhoTheme, useNotifications} from 'reapop'\n\nconst ATopLevelComponent = () =\u003e {\n    // 1. Retrieve the notifications to display, and the function used to dismiss a notification.\n    const {notifications, dismissNotification} = useNotifications()\n    return (\n        \u003cdiv\u003e\n            \u003cNotificationsSystem\n                // 2. Pass the notifications you want Reapop to display.\n                notifications={notifications}\n                // 3. Pass the function used to dismiss a notification.\n                dismissNotification={(id) =\u003e dismissNotification(id)}\n                // 4. Pass a builtIn theme or a custom theme.\n                theme={atalhoTheme}\n            /\u003e\n        \u003c/div\u003e\n    )\n}\n```\n\n3 - Set default notifications attributes\n\n``` js\nimport {setUpNotifications} from 'reapop'\n\n// run this function when your application starts before creating any notifications\nsetUpNotifications({\n    defaultProps: {\n        position: 'top-right',\n        dismissible: true\n    } \n})\n```\n\n4 - Upsert or dismiss notification from any React components.\n\n``` jsx\nimport React from 'react'\nimport {useNotifications} from 'reapop'\n\nconst AComponent = () =\u003e {\n    // 1. Retrieve the action to create/update a notification.\n    const {notify} = useNotifications()\n    \n    useEffect(() =\u003e {\n        // 2. Create a notification.\n        notify('Welcome to the documentation', 'info')\n    }, [])\n\n    return (\n        ...\n    )\n}\n```\n\n## Documentation\n\nRead the [documentation](https://github.com/LouisBarranqueiro/reapop/blob/master/DOCUMENTATION.md) to learn more and see what you can with it.\n\n## License\n\nReapop is under [MIT License](https://github.com/LouisBarranqueiro/reapop/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flouisbarranqueiro%2Freapop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flouisbarranqueiro%2Freapop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flouisbarranqueiro%2Freapop/lists"}