{"_id":"@ala_eddine/react-push-notify","_rev":"1-1b04cb454d600faf73686051a47337f4","name":"@ala_eddine/react-push-notify","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@ala_eddine/react-push-notify","version":"0.2.0","description":"Push notification component for React","main":"dist/index.js","module":"dist/index.js","babel":{"presets":["@babel/react","@babel/env"]},"license":"MIT","keywords":["notifications","push-notification","react-notifications","react-push-notification"],"repository":{"url":"git:https://github.com/MenaiAla/react-push-notify.git"},"dependencies":{"@babel/runtime":"^7.11.2","@fortawesome/fontawesome-svg-core":"^1.2.30","@fortawesome/free-brands-svg-icons":"^5.14.0","@fortawesome/free-solid-svg-icons":"^5.14.0","@fortawesome/react-fontawesome":"^0.1.11","@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.5.0","@testing-library/user-event":"^7.2.1","react":"^16.13.1","react-dom":"^16.13.1","react-scripts":"3.4.3","styled-components":"^5.2.0"},"scripts":{"start":"react-scripts start","build":"react-scripts build","build-babel":"SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components/Notification --out-dir dist --copy-files","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -p 6006 -s public","build-storybook":"build-storybook -s public"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"resolutions":{"styled-components":"^5"},"devDependencies":{"@babel/cli":"^7.11.6","@babel/core":"^7.11.6","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-proposal-decorators":"^7.0.0","@babel/plugin-proposal-export-namespace-from":"^7.0.0","@babel/plugin-proposal-function-sent":"^7.0.0","@babel/plugin-proposal-json-strings":"^7.0.0","@babel/plugin-proposal-numeric-separator":"^7.0.0","@babel/plugin-proposal-throw-expressions":"^7.0.0","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/plugin-syntax-import-meta":"^7.0.0","@storybook/addon-actions":"^6.0.21","@storybook/addon-essentials":"^6.0.21","@storybook/addon-links":"^6.0.21","@storybook/node-logger":"^6.0.21","@storybook/preset-create-react-app":"^3.1.4","@storybook/react":"^6.0.21","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.4","enzyme-to-json":"^3.5.0","react-addons-test-utils":"^15.6.2","react-is":"^16.13.1","react-test-renderer":"^16.13.1"},"gitHead":"afe472d54ab078257f89e65d2e9a62d4573e5483","_id":"@ala_eddine/react-push-notify@0.2.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-VuN1E400iamKO/n6nnLc9bdfobfUODRJxEKsExoF4gf2q2TU5pahRyRy/6BkBQYM1IK7QlimfJYHdO2d6cEdRw==","shasum":"cc59151beea0d6f5652b7e8c357aeb8134d0fb00","tarball":"https://registry.npmjs.org/@ala_eddine/react-push-notify/-/react-push-notify-0.2.0.tgz","fileCount":37,"unpackedSize":89994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYA7DCRA9TVsSAnZWagAAqowP/3n3f8scKuW0Ayh78GuH\nJt1+KQsyTQMo4jNBM2M4P4ujl+j+wbLfQmfSxmnSHpotBdmg3msnCl+bVKae\nbaWWHIK56ptDSotqMgAx+L5u8LH4vv9iY/lf3BwW94+rZBXHyblEEdrjc5CB\nFvG2OHZguvGV9bIb1Iv1xOB42hNnIol+LOco26MHJeoYW5km7k/cj6ABFy3f\nT5YPl+pElzSDFtiCFtKG4SzPKsD9D/t3v+Hd159nMKFFnhw8c0RFA9qFaTxn\nZJ49++BgB/Bu7OsYoZw7ISPSVSm3TncC9Vh89ja5/Ce67Lf04jzZFxBxTy5+\nUE39u38/kaPSTjc9AWnghLsB7g0MUx7VLOTwlriZWLYt3bgmd//78irB+94v\nu96ETA9iNXq9BSf57W1rtYXe/pwDu94iXO450PRPQPdCfE5Ui6rCBKRVhnBZ\nqjtZfZUclHX+EB32UpG8MgYHmP0n15R+TE6L7OsLA2zXoFWvMpj9mqP7B4Ia\nDqQsmj3x8nwkRuk3voSfKz5sb+1H9e+qREAGf8ta20X9nQGBwQsI3jjlofLH\n50PqhE6M50S9KjmaHqOXynC+ecMR0kTmt2AiMEfDrU195Ogrk1opEI+YhJv4\nlNXzYTSrHbLVGoEM7IGv+/EmeT4lQ3MXAJnq5wJ9adysyGpiJDTlbU8FJFY4\nS2at\r\n=cZBO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBE/+Zol2OHJlK1K94OCRGRkV0wWObQOGl1ZUDcYKEVAiBJNg9oycmIAor+GqdEPwAv5VsVqW17e/oQ55UT+7itHQ=="}]},"maintainers":[{"name":"ala_eddine","email":"ala.official.acc@gmail.com"}],"_npmUser":{"name":"ala_eddine","email":"ala.official.acc@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-push-notify_0.2.0_1600130755229_0.4688350818038325"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-15T00:45:55.185Z","0.2.0":"2020-09-15T00:45:55.327Z","modified":"2022-04-04T12:32:36.731Z"},"maintainers":[{"name":"ala_eddine","email":"ala.official.acc@gmail.com"}],"description":"Push notification component for React","keywords":["notifications","push-notification","react-notifications","react-push-notification"],"repository":{"url":"git:https://github.com/MenaiAla/react-push-notify.git"},"license":"MIT","readme":"
\r\n \r\n

React Push Notify

\r\n
I want to be your :heart: notification in your React application
\r\n\r\n---\r\n\r\nReact Push Notify is React-based component for displaying push notifications in the browser. React Push Notify is meant to be _well designed_, _compatible_, _lightwhite_, _customizable_ and _easy to use_.\r\n\r\n\r\n[Download](https://www.npmjs.com/package/react-push-notify) • \r\n[Demo](https://eejv4.csb.app/) • \r\n[Chat](https://spectrum.chat/users/menai-ala-eddine) • \r\n[Contribute](https://github.com/MenaiAla/react-push-notify/pulls) \r\n\r\n
\r\n\r\n\r\n\r\n### Intro\r\n---\r\n\r\nWhen I started looking for _well designed_, _compatible_, _lightwhite_, _customizable_ and _easy to use_ push notification for my React applications that fits my needs and delight users, I did not find a one that requires only **one line of code**. So, I decided to design and develop React Push Notify for displaying out-of-the-box push notifications.\r\n\r\n\r\n### Features\r\n---\r\n\r\n- [x] Creative design.\r\n\r\n- [x] Lightwhite.\r\n\r\n- [x] Customizable.\r\n\r\n- [x] Easy to use.\r\n\r\n- [x] Extensive.\r\n\r\n[Request Feature →](https://github.com/MenaiAla/react-push-notify/pulls)\r\n\r\n### Installation\r\n---\r\n\r\nTo get started with React Push Notify, you can simply install it via npm.\r\n\r\n```command\r\nnpm install react-push-notify\r\n```\r\n\r\n[Discover on npm →](https://www.npmjs.com/package/react-push-notify)\r\n\r\n### Basic Usage\r\n---\r\n\r\nTo add React Push Notify in your application, you need to import it from its package and define the **required** properties.\r\n\r\n```Javascript\r\nimport Notify from \"react-push-notify\";\r\n\r\nconst Notification = () => {\r\n\r\nconst data = {\r\n title: \"Notify updates\",\r\n subtitle: \"Stay tuned with Notify\",\r\n message: \"I want to hear your feedback.\"\r\n};\r\n\r\nconst action = {\r\n name: \"Star\",\r\n event: () => alert(\"Thank you for your star\")\r\n};\r\n\r\nconst props = { data, action };\r\n\r\nreturn ();\r\n\r\n```\r\n[Show me →](https://codesandbox.io/s/q3934)\r\n\r\n\r\n### Advanced Usage\r\n---\r\n\r\nYou can customize your `type` and `styles`.\r\n\r\n```Javascript\r\nimport Notify from \"react-push-notify\";\r\n\r\nconst Notification = () => {\r\n\r\nconst data = {\r\n title: \"Notify updates\",\r\n subtitle: \"Stay tuned with Notify\",\r\n message: \"I want to hear your feedback.\"\r\n};\r\n\r\nconst style = {\r\n rounded: true,\r\n animation: \"bottom2up\",\r\n duration: 1\r\n}\r\n\r\nconst action = {\r\n name: \"Star\",\r\n event: () => alert(\"Thank you for your star\")\r\n};\r\n\r\nconst type = \"success\";\r\n\r\nconst props = { type, data, style, action };\r\n\r\nreturn ();\r\n\r\n```\r\n\r\n#### What about the Dark Mode?\r\n\r\nDon't worry, the Dark Mode is included too. You need to add just `darkmode` property.\r\n\r\n```Javascript\r\nreturn ()\r\n```\r\n\r\n### API reference\r\n---\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\nProps\r\n\r\nType\r\n\r\nRequired\r\n\r\nDynamic\r\n\r\nDefault\r\n\r\nKeys\r\n\r\nAlternatives\r\n
\r\ntype\r\n\r\nstring\r\n\r\n\r\n•\r\n\r\ninfo\r\n\r\n\r\nsuccess | error | warning\r\n
\r\ndata\r\n\r\nobject\r\n\r\n •\r\n\r\n•\r\n\r\n\r\ntitle: string\r\n\r\nsubtitle: string\r\n\r\nmessage: string\r\n\r\n\r\n
\r\nstyle\r\n\r\nobject\r\n\r\n\r\n•\r\n\r\nrounded: false\r\n\r\nanimation: \"left2right\"\r\n\r\nduration: 2\r\n\r\n\r\nrounded: boolean\r\n\r\nanimation: string\r\n\r\nduration: string\r\n\r\n\r\n
\r\naction\r\n\r\nobject\r\n\r\n•\r\n\r\n•\r\n\r\n\r\nname: string\r\n\r\nevent: function\r\n\r\n\r\n
\r\n\r\n### Next Release\r\n---\r\n\r\nReact Push Notify started simple and minimal, but it needs your feedback to add more features and fix current bugs.\r\n\r\n- [ ] Add customizable media ( image, video) feature.\r\n\r\n- [ ] Add customizable position feature.\r\n\r\n- [ ] Add customizable background color feature.\r\n\r\n[Request feature →](https://github.com/MenaiAla/react-push-notify/pulls)\r\n\r\n---\r\n

Thank you

\r\n\r\n---","readmeFilename":"README.md"}