{"_id":"@afzalimdad9/react-alert","_rev":"6-a51dcd63fe19f76df35722732d0e278e","name":"@afzalimdad9/react-alert","dist-tags":{"latest":"7.0.8"},"versions":{"7.0.3":{"name":"@afzalimdad9/react-alert","version":"7.0.3","keywords":["react","alert","react-alert","toaster","react-toaster","react-component","afzalimdad9"],"author":{"name":"Afzal Imdad","email":"afzalimdad9@gmail.com"},"license":"MIT","_id":"@afzalimdad9/react-alert@7.0.3","maintainers":[{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"}],"homepage":"https://github.com/afzalimdad9/react-alert#readme","bugs":{"url":"https://github.com/afzalimdad9/react-alert/issues"},"dist":{"shasum":"6d3c901c598e7968390e21b9fc51e6370277166f","tarball":"https://registry.npmjs.org/@afzalimdad9/react-alert/-/react-alert-7.0.3.tgz","fileCount":9,"integrity":"sha512-VXzBexq+rOEIylL12WCNJbCVEFkcKff6HDzrIkl9/vd03Blbtvc5UDMPg5ut6UDBHy+HtCyP4tnttiK8wPgUKw==","signatures":[{"sig":"MEYCIQCc0zxwJTGi6K+vhTyK7wQM6dcWOrXjfsJPkrSoL6knBwIhAIlUT4s2OryjFffSJAMilO+eUHn9bePTcNK+6PD7g3qY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":69935},"jest":{"collectCoverageFrom":["src/*.js","!src/index.js"]},"main":"dist/cjs/@afzalimdad9/react-alert.js","module":"dist/esm/@afzalimdad9/react-alert.js","gitHead":"f4672ecbfec7c85e1373e667600ae65f6b0000a4","scripts":{"lint":"eslint './src/**/*.js'","test":"jest --coverage --no-cache","build":"node ./scripts/build.js","prepublish":"yarn build","test:watch":"jest --watch --coverage --no-cache"},"_npmUser":{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"},"repository":{"url":"git+https://github.com/afzalimdad9/react-alert.git","type":"git"},"_npmVersion":"10.9.2","description":"A simple react alert component","directories":{},"_nodeVersion":"23.9.0","dependencies":{"prop-types":"^15.8.1","react-transition-group":"^4.4.5"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^9.1.7","react":"^19.0.0","eslint":"^9.22.0","rollup":"^1.32.1","jest-cli":"^29.7.0","prettier":"^3.5.3","react-dom":"^19.0.0","@babel/cli":"^7.26.4","@babel/core":"^7.26.9","lint-staged":"^15.4.3","pascal-case":"^4.0.0","babel-eslint":"10.1.0","lodash.kebabcase":"^4.1.1","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","eslint-plugin-react":"^7.37.4","rollup-plugin-babel":"^4.4.0","babel-preset-stage-1":"^6.24.1","rollup-plugin-uglify":"^6.0.4","rollup-plugin-replace":"^2.2.0","@testing-library/react":"^16.2.0","rollup-plugin-commonjs":"^10.1.0","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.2.0","rollup-plugin-node-resolve":"^5.2.0"},"peerDependencies":{"react":"^16.8.1 || ^17","react-dom":"^16.8.1 || ^17"},"_npmOperationalInternal":{"tmp":"tmp/react-alert_7.0.3_1741467788829_0.1226461368617302","host":"s3://npm-registry-packages-npm-production"}},"7.0.4":{"name":"@afzalimdad9/react-alert","version":"7.0.4","keywords":["react","alert","react-alert","toaster","react-toaster","react-component","afzalimdad9"],"author":{"name":"Afzal Imdad","email":"afzalimdad9@gmail.com"},"license":"MIT","_id":"@afzalimdad9/react-alert@7.0.4","maintainers":[{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"}],"homepage":"https://github.com/afzalimdad9/react-alert#readme","bugs":{"url":"https://github.com/afzalimdad9/react-alert/issues"},"dist":{"shasum":"81fccff8edd05d8757fbc6bc4928b59643be97d1","tarball":"https://registry.npmjs.org/@afzalimdad9/react-alert/-/react-alert-7.0.4.tgz","fileCount":9,"integrity":"sha512-8Yo1P+o2e91Wfuv5/iE+xD2iZUjJGiNVtnkc+JZeDjt6YzZwIwqkAy60EMNdE3hBber/ZunXYtTc+Y++CvB2aw==","signatures":[{"sig":"MEUCIHqmYXzSZzziYaTQZ5E+gWRamXR5hG30gcTYYhJR0VR7AiEAut9Az9Ycew2ylfHLUhKb1xrSqjeasNZqfijuD0o7KVg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":69841},"jest":{"collectCoverageFrom":["src/*.js","!src/index.js"]},"main":"dist/cjs/@afzalimdad9/react-alert.js","module":"dist/esm/@afzalimdad9/react-alert.js","gitHead":"a8c9490005d2d6f1e7957f1fd7599cd1ac7cddb9","scripts":{"lint":"eslint './src/**/*.js'","test":"jest --coverage --no-cache","build":"node ./scripts/build.js","prepublish":"yarn build","test:watch":"jest --watch --coverage --no-cache"},"_npmUser":{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"},"repository":{"url":"git+https://github.com/afzalimdad9/react-alert.git","type":"git"},"_npmVersion":"10.9.2","description":"A simple react alert component","directories":{},"_nodeVersion":"23.9.0","dependencies":{"prop-types":"^15.8.1","react-transition-group":"^4.4.5"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^9.1.7","react":"^19.0.0","eslint":"^9.22.0","rollup":"^1.32.1","jest-cli":"^29.7.0","prettier":"^3.5.3","react-dom":"^19.0.0","@babel/cli":"^7.26.4","@babel/core":"^7.26.9","lint-staged":"^15.4.3","pascal-case":"^4.0.0","babel-eslint":"10.1.0","lodash.kebabcase":"^4.1.1","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","eslint-plugin-react":"^7.37.4","rollup-plugin-babel":"^4.4.0","babel-preset-stage-1":"^6.24.1","rollup-plugin-uglify":"^6.0.4","rollup-plugin-replace":"^2.2.0","@testing-library/react":"^16.2.0","rollup-plugin-commonjs":"^10.1.0","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.2.0","rollup-plugin-node-resolve":"^5.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-alert_7.0.4_1741504042308_0.7912220267328669","host":"s3://npm-registry-packages-npm-production"}},"7.0.5":{"name":"@afzalimdad9/react-alert","version":"7.0.5","keywords":["react","alert","react-alert","toaster","react-toaster","react-component","afzalimdad9"],"author":{"name":"Afzal Imdad","email":"afzalimdad9@gmail.com"},"license":"MIT","_id":"@afzalimdad9/react-alert@7.0.5","maintainers":[{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"}],"homepage":"https://github.com/afzalimdad9/react-alert#readme","bugs":{"url":"https://github.com/afzalimdad9/react-alert/issues"},"dist":{"shasum":"09f7cf752862afc8064b2dc1ec88dd41ac1cc5db","tarball":"https://registry.npmjs.org/@afzalimdad9/react-alert/-/react-alert-7.0.5.tgz","fileCount":45,"integrity":"sha512-3Ft5BcBBLizgfAf2wAbpNjAY6qYDSNrf+G3hS4bIVJHSSdxoejPuDsJ775II+H4mVbFBHF/hyAGNqDlYJtOseA==","signatures":[{"sig":"MEUCIQDnWhHFQtyy7Uy64tCP3xb9hgfwpK4FjTMNOfJAOlDgHgIgfzvUpb2ruPOGhV8yEesR+II4y1SxY80umznKNsRkZlU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84091},"jest":{"collectCoverageFrom":["src/*.js","!src/index.js"]},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"76e6c2d7c2f97725e7b6b53a8b5f08ecb17dca38","scripts":{"lint":"eslint './src/**/*.ts' './src/**/*.tsx' --fix","test":"jest --coverage --no-cache","build":"tsc","prepare":"husky install","prebuild":"rimraf dist","precommit":"lint-staged","prepublish":"yarn build","test:watch":"jest --watch --coverage --no-cache","lint:staged":"lint-staged"},"_npmUser":{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"},"repository":{"url":"git+https://github.com/afzalimdad9/react-alert.git","type":"git"},"_npmVersion":"10.9.2","description":"A simple react alert component","directories":{},"_nodeVersion":"22.14.0","dependencies":{"prop-types":"^15.8.1","typescript":"^5.8.2","react-transition-group":"^4.4.5"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^9.1.7","react":"^19.0.0","eslint":"^9.22.0","rimraf":"^6.0.1","jest-cli":"^29.7.0","prettier":"^3.5.3","react-dom":"^19.0.0","@types/node":"^22.13.10","lint-staged":"^15.4.3","@types/react":"^19.0.10","babel-eslint":"10.1.0","@types/react-dom":"^19.0.4","lodash.kebabcase":"^4.1.1","@babel/preset-env":"^7.26.9","@types/prop-types":"^15.7.14","@babel/preset-react":"^7.26.3","eslint-plugin-react":"^7.37.4","@testing-library/react":"^16.2.0","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.2.0","@types/react-transition-group":"^4.4.12"},"_npmOperationalInternal":{"tmp":"tmp/react-alert_7.0.5_1741519262284_0.6965388304027615","host":"s3://npm-registry-packages-npm-production"}},"7.0.6":{"name":"@afzalimdad9/react-alert","version":"7.0.6","keywords":["react","alert","react-alert","toaster","react-toaster","react-component","afzalimdad9"],"author":{"name":"Afzal Imdad","email":"afzalimdad9@gmail.com"},"license":"MIT","_id":"@afzalimdad9/react-alert@7.0.6","maintainers":[{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"}],"homepage":"https://github.com/afzalimdad9/react-alert#readme","bugs":{"url":"https://github.com/afzalimdad9/react-alert/issues"},"dist":{"shasum":"d8d316d0b384f7e950eb8e0d12d1cd1287add4de","tarball":"https://registry.npmjs.org/@afzalimdad9/react-alert/-/react-alert-7.0.6.tgz","fileCount":55,"integrity":"sha512-eHDTv2fML7gZ/wMcPw6tCKpdhazhtnbRghiEassAg+H6wYcIe0nXt7e9FQAo9axY80RA7OgAWVRSkxscAjjYPg==","signatures":[{"sig":"MEQCIFfApnzUA3DYpjdlO9GDh68+oVuVYzWg6nZAkNEWidPNAiAPLFoxMV1TAtRrso67K0mum0TFDovHPokNxvnFnCNFMQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":95913},"jest":{"collectCoverageFrom":["src/*.js","!src/index.js"]},"main":"src/index.ts","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"178a9a46ec62310acc1b3ddb4cc2dd782117429f","scripts":{"lint":"eslint './src/**/*.ts' './src/**/*.tsx' --fix","test":"jest --coverage --no-cache","build":"tsc --outDir dist","prepare":"husky install","prebuild":"rimraf dist","precommit":"lint-staged","prepublish":"yarn build","test:watch":"jest --watch --coverage --no-cache","lint:staged":"lint-staged"},"_npmUser":{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"},"repository":{"url":"git+https://github.com/afzalimdad9/react-alert.git","type":"git"},"_npmVersion":"10.9.2","description":"A simple react alert component","directories":{},"_nodeVersion":"22.14.0","dependencies":{"prop-types":"^15.8.1","typescript":"^5.8.2","react-transition-group":"^4.4.5"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^9.1.7","react":"^19.0.0","eslint":"^9.22.0","rimraf":"^6.0.1","jest-cli":"^29.7.0","prettier":"^3.5.3","react-dom":"^19.0.0","@types/node":"^22.13.10","lint-staged":"^15.4.3","@types/react":"^19.0.10","babel-eslint":"10.1.0","@types/react-dom":"^19.0.4","lodash.kebabcase":"^4.1.1","@babel/preset-env":"^7.26.9","@types/prop-types":"^15.7.14","@babel/preset-react":"^7.26.3","eslint-plugin-react":"^7.37.4","@testing-library/react":"^16.2.0","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.2.0","@types/react-transition-group":"^4.4.12"},"_npmOperationalInternal":{"tmp":"tmp/react-alert_7.0.6_1741521247122_0.09775358797707767","host":"s3://npm-registry-packages-npm-production"}},"7.0.7":{"name":"@afzalimdad9/react-alert","version":"7.0.7","keywords":["react","alert","react-alert","toaster","react-toaster","react-component","afzalimdad9"],"author":{"name":"Afzal Imdad","email":"afzalimdad9@gmail.com"},"license":"MIT","_id":"@afzalimdad9/react-alert@7.0.7","maintainers":[{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"}],"homepage":"https://github.com/afzalimdad9/react-alert#readme","bugs":{"url":"https://github.com/afzalimdad9/react-alert/issues"},"dist":{"shasum":"f458a76a4dfd2a2b91d765eb3b2d48700999663f","tarball":"https://registry.npmjs.org/@afzalimdad9/react-alert/-/react-alert-7.0.7.tgz","fileCount":55,"integrity":"sha512-VHxhWms/qWtcs4hjYir1HBExK5dmCG9+SUAuuqEhp1KLimuUh87iXbjiDbrpjbuwjBHwCGu1//rkVxw0a3annw==","signatures":[{"sig":"MEUCIQC1Zz8DnbQQ4nTj/G9pDkhiHZGwMysIaUAI87NosZT9swIgX3A7yv5f4pdEyOQDoU+yhBlvdigt4fNKPkuTHKKbWQU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":95746},"jest":{"collectCoverageFrom":["src/*.js","!src/index.js"]},"main":"src/index.ts","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"178a9a46ec62310acc1b3ddb4cc2dd782117429f","scripts":{"lint":"eslint './src/**/*.ts' './src/**/*.tsx' --fix","test":"jest --coverage --no-cache","build":"tsc --outDir dist","prepare":"husky install","prebuild":"rimraf dist","precommit":"lint-staged","test:watch":"jest --watch --coverage --no-cache","lint:staged":"lint-staged","prepublishOnly":"yarn build"},"_npmUser":{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"},"repository":{"url":"git+https://github.com/afzalimdad9/react-alert.git","type":"git"},"_npmVersion":"10.9.2","description":"A simple react alert component","directories":{},"_nodeVersion":"22.14.0","dependencies":{"prop-types":"^15.8.1","typescript":"^5.8.2","react-transition-group":"^4.4.5"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^9.1.7","react":"^19.0.0","eslint":"^9.22.0","rimraf":"^6.0.1","jest-cli":"^29.7.0","prettier":"^3.5.3","react-dom":"^19.0.0","@types/node":"^22.13.10","lint-staged":"^15.4.3","@types/react":"^19.0.10","babel-eslint":"10.1.0","@types/react-dom":"^19.0.4","lodash.kebabcase":"^4.1.1","@babel/preset-env":"^7.26.9","@types/prop-types":"^15.7.14","@babel/preset-react":"^7.26.3","eslint-plugin-react":"^7.37.4","@testing-library/react":"^16.2.0","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.2.0","@types/react-transition-group":"^4.4.12"},"_npmOperationalInternal":{"tmp":"tmp/react-alert_7.0.7_1741521331163_0.7951534407285432","host":"s3://npm-registry-packages-npm-production"}},"7.0.8":{"name":"@afzalimdad9/react-alert","description":"A simple react alert component","version":"7.0.8","author":{"name":"Afzal Imdad","email":"afzalimdad9@gmail.com"},"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/afzalimdad9/react-alert.git"},"keywords":["react","alert","react-alert","toaster","react-toaster","react-component","afzalimdad9"],"scripts":{"prebuild":"rimraf dist","build":"tsc --outDir dist","test":"jest --coverage --no-cache","test:watch":"jest --watch --coverage --no-cache","prepublishOnly":"yarn build","lint":"eslint './src/**/*.ts' './src/**/*.tsx' --fix","lint:staged":"lint-staged","precommit":"lint-staged","prepare":"husky install"},"devDependencies":{"@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.2.0","@types/node":"^22.13.10","@types/prop-types":"^15.7.14","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","@types/react-transition-group":"^4.4.12","babel-eslint":"10.1.0","eslint":"^9.22.0","eslint-plugin-react":"^7.37.4","eslint-plugin-react-hooks":"^5.2.0","husky":"^9.1.7","jest-cli":"^29.7.0","lint-staged":"^15.4.3","lodash.kebabcase":"^4.1.1","prettier":"^3.5.3","react":"^19.0.0","react-dom":"^19.0.0","rimraf":"^6.0.1"},"jest":{"collectCoverageFrom":["src/*.js","!src/index.js"]},"dependencies":{"prop-types":"^15.8.1","react-transition-group":"^4.4.5","typescript":"^5.8.2"},"_id":"@afzalimdad9/react-alert@7.0.8","gitHead":"a20c32be60a41767c478c9166204083736ce2126","bugs":{"url":"https://github.com/afzalimdad9/react-alert/issues"},"homepage":"https://github.com/afzalimdad9/react-alert#readme","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-2HPIfPl9/fbNViOISATZrk0DeNBmy1v+VfXjNvuZyQvd6mLgUNezM1RjdKV4OikwEz+IsjoKVeZlhgpcnQ6bSA==","shasum":"9eefdc0d44697ef53c62c6039ebca2f8e08cc86d","tarball":"https://registry.npmjs.org/@afzalimdad9/react-alert/-/react-alert-7.0.8.tgz","fileCount":45,"unpackedSize":83818,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAhBtNhnFYIKBvwKfgKgZt5oa+vfT7xvWdgByURsS5SiAiBKqLF2wPkhWjdPNkxn4xyGVUMIxxvUBT8O2eBSEIYlvA=="}]},"_npmUser":{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"},"directories":{},"maintainers":[{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-alert_7.0.8_1741522369633_0.9951048079877958"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-08T21:03:08.763Z","modified":"2025-03-09T12:12:50.019Z","7.0.3":"2025-03-08T21:03:09.079Z","7.0.4":"2025-03-09T07:07:22.484Z","7.0.5":"2025-03-09T11:21:02.491Z","7.0.6":"2025-03-09T11:54:07.351Z","7.0.7":"2025-03-09T11:55:31.362Z","7.0.8":"2025-03-09T12:12:49.854Z"},"bugs":{"url":"https://github.com/afzalimdad9/react-alert/issues"},"author":{"name":"Afzal Imdad","email":"afzalimdad9@gmail.com"},"license":"MIT","homepage":"https://github.com/afzalimdad9/react-alert#readme","keywords":["react","alert","react-alert","toaster","react-toaster","react-component","afzalimdad9"],"repository":{"type":"git","url":"git+https://github.com/afzalimdad9/react-alert.git"},"description":"A simple react alert component","maintainers":[{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"}],"readme":"# @afzalimdad9/react-alert\n\n> alerts for React\n\n[![travis build](https://img.shields.io/travis/afzalimdad9/react-alert.svg?style=flat-square)](https://travis-ci.org/afzalimdad9/react-alert)\n[![version](https://img.shields.io/npm/v/@afzalimdad9/react-alert.svg?style=flat-square)](http://npm.im/@afzalimdad9/react-alert)\n\n## Installation\n\n```bash\n$ npm install --save @afzalimdad9/react-alert\n```\n\n### Templates\n\nYou can provide your own alert template if you need to. Otherwise you can just plug in one of the following:\n\n- [Basic](https://github.com/afzalimdad9/react-alert/tree/master/react-alert-template-basic)\n- [Dark](https://github.com/afzalimdad9/react-alert/tree/master/react-alert-template-oldschool-dark)\n- [Material UI](https://github.com/afzalimdad9/react-alert/tree/master/react-alert-template-mui)\n\nFeel free to submit a PR with the link for your own template.\n\nTo get started, try installing the basic one:\n\n```bash\n$ npm install --save @afzalimdad9/react-alert @afzalimdad9/react-alert-template-basic\n```\n\n## Usage\n\nFirst you have to wrap your app with the Provider giving it the alert template and optionally some options:\n\n```js\n// index.js\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { transitions, positions, Provider as AlertProvider } from '@afzalimdad9/react-alert'\nimport AlertTemplate from '@afzalimdad9/react-alert-template-basic'\nimport App from './App'\n\n// optional configuration\nconst options = {\n  // you can also just use 'bottom center'\n  position: positions.BOTTOM_CENTER,\n  timeout: 5000,\n  offset: '30px',\n  // you can also just use 'scale'\n  transition: transitions.SCALE\n}\n\nconst Root = () => (\n  <AlertProvider template={AlertTemplate} {...options}>\n    <App />\n  </AlertProvider>\n)\n\nrender(<Root />, document.getElementById('root'))\n```\n\nThen import the `useAlert` hook to be able to show alerts:\n\n```js\n// App.js\nimport React from 'react'\nimport { useAlert } from '@afzalimdad9/react-alert'\n\nconst App = () => {\n  const alert = useAlert()\n\n  return (\n    <button\n      onClick={() => {\n        alert.show('Oh look, an alert!')\n      }}\n    >\n      Show Alert\n    </button>\n  )\n}\n\nexport default App\n```\n\nAnd that's it!\n\nYou can also use it with a HOC:\n\n```js\nimport React from 'react'\nimport { withAlert } from '@afzalimdad9/react-alert'\n\nconst App = ({ alert }) => (\n  <button\n    onClick={() => {\n      alert.show('Oh look, an alert!')\n    }}\n  >\n    Show Alert\n  </button>\n)\n\nexport default withAlert()(App)\n```\n\n## Options\n\nYou can pass the following options as props to `Provider`:\n\n```js\noffset: PropTypes.string // the margin of each alert\nposition: PropTypes.oneOf([\n  'top left',\n  'top right',\n  'top center',\n  'middle left',\n  'middle',\n  'middle right',\n  'bottom left',\n  'bottom right',\n  'bottom center'\n]) // the position of the alerts in the page\ntimeout: PropTypes.number // timeout to alert remove itself, if  set to 0 it never removes itself\ntype: PropTypes.oneOf(['info', 'success', 'error']) // the default alert type used when calling this.props.alert.show\ntransition: PropTypes.oneOf(['fade', 'scale']) // the transition animation\ncontainerStyle: PropTypes.Object // style to be applied in the alerts container\ntemplate: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired // the alert template to be used\n```\n\nNote that the position, type and transition strings are available as constants which can be imported the next way:\n\n```js\nimport { positions, transitions, types } from '@afzalimdad9/react-alert'\n```\n\nand have such values:\n\n```js\nexport const positions = {\n  TOP_LEFT: 'top left',\n  TOP_CENTER: 'top center',\n  TOP_RIGHT: 'top right',\n  MIDDLE_LEFT: 'middle left',\n  MIDDLE: 'middle',\n  MIDDLE_RIGHT: 'middle right',\n  BOTTOM_LEFT: 'bottom left',\n  BOTTOM_CENTER: 'bottom center',\n  BOTTOM_RIGHT: 'bottom right'\n}\n\nexport const types = {\n  INFO: 'info',\n  SUCCESS: 'success',\n  ERROR: 'error'\n}\n\nexport const transitions = {\n  FADE: 'fade',\n  SCALE: 'scale'\n}\n```\n\nHere's the defaults:\n\n```js\noffset: '10px'\nposition: positions.TOP_CENTER\ntimeout: 0\ntype: types.INFO\ntransition: transitions.FADE,\ncontainerStyle: {\n  zIndex: 100\n}\n```\n\nThose options will be applied to all alerts (please, also have a look at [edge-cases](#showing-alerts-in-different-positions-at-the-same-time))\n\n## Api\n\nAfter getting the `alert` with the `useAlert` hook, this is what you can do with it:\n\n```js\n// show\nconst alert = alert.show('Some message', {\n  timeout: 2000, // custom timeout just for this one alert\n  type: 'success',\n  onOpen: () => {\n    console.log('hey')\n  }, // callback that will be executed after this alert open\n  onClose: () => {\n    console.log('closed')\n  } // callback that will be executed after this alert is removed\n})\n\n// info\n// just an alias to alert.show(msg, { type: 'info' })\nconst alert = alert.info('Some info', {\n  timeout: 2000, // custom timeout just for this one alert\n  onOpen: () => {\n    console.log('hey')\n  }, // callback that will be executed after this alert open\n  onClose: () => {\n    console.log('closed')\n  } // callback that will be executed after this alert is removed\n})\n\n// success\n// just an alias to alert.show(msg, { type: 'success' })\nconst alert = alert.success('Some success', {\n  timeout: 2000, // custom timeout just for this one alert\n  onOpen: () => {\n    console.log('hey')\n  }, // callback that will be executed after this alert open\n  onClose: () => {\n    console.log('closed')\n  } // callback that will be executed after this alert is removed\n})\n\n// error\n// just an alias to alert.show(msg, { type: 'error' })\nconst alert = alert.error('Some error', {\n  timeout: 2000, // custom timeout just for this one alert\n  onOpen: () => {\n    console.log('hey')\n  }, // callback that will be executed after this alert open\n  onClose: () => {\n    console.log('closed')\n  } // callback that will be executed after this alert is removed\n})\n\n// remove\n// use it to remove an alert programmatically\nalert.remove(alert)\n\n// removeAll\n// use it to remove all alerts programmatically\nalert.removeAll()\n```\n\n## Using a custom alert template\n\nIf you ever need to have an alert just the way you want, you can provide your own template! Here's a simple example:\n\n```js\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { Provider as AlertProvider } from '@afzalimdad9/react-alert'\nimport App from './App'\n\n// the style contains only the margin given as offset\n// options contains all alert given options\n// message is the alert message\n// close is a function that closes the alert\nconst AlertTemplate = ({ style, options, message, close }) => (\n  <div style={style}>\n    {options.type === 'info' && '!'}\n    {options.type === 'success' && ':)'}\n    {options.type === 'error' && ':('}\n    {message}\n    <button onClick={close}>X</button>\n  </div>\n)\n\nconst Root = () => (\n  <AlertProvider template={AlertTemplate}>\n    <App />\n  </AlertProvider>\n)\n\nrender(<Root />, document.getElementById('root'))\n```\n\nEasy, right?\n\n## Using a component as a message\n\nYou can also pass in a component as a message, like this:\n\n```js\nalert.show(<div style={{ color: 'blue' }}>Some Message</div>)\n```\n\n## Showing alerts in different positions at the same time\n\nFirst of all, if have a need to separate the logic of showing alerts in different\npositions at the same time it is possible to use multiple AlertProviders in one project and\nnest them across the DOM tree. Also you can use different Contexts to get the references\nto each type of alert separately.\n\n```js\nimport React, { createContext } from 'react'\nimport { render } from 'react-dom'\nimport { useAlert, positions, Provider as AlertProvider } from '@afzalimdad9/react-alert'\nimport AlertTemplate from '@afzalimdad9/react-alert-template-basic'\n\nconst TopRightAlertContext = createContext()\n\nconst App = () => {\n  const alert = useAlert()\n  const topRightAlert = useAlert(TopRightAlertContext)\n\n  return (\n    <div>\n      <button onClick={() => alert.show('Oh look, an alert!')}>\n        Show Alert\n      </button>\n      <button\n        onClick={() =>\n          topRightAlert.show('Oh look, an alert in the top right corner!')\n        }\n      >\n        Show Top Right Alert\n      </button>\n    </div>\n  )\n}\n\nconst Root = () => (\n  <AlertProvider template={AlertTemplate}>\n    <AlertProvider\n      template={AlertTemplate}\n      position={positions.TOP_RIGHT}\n      context={TopRightAlertContext}\n    >\n      <App />\n    </AlertProvider>\n  </AlertProvider>\n)\n\nrender(<Root />, document.getElementById('root'))\n```\n\nAnother use case is when you don't want to nest a couple of AlertProviders\nbecause it will somehow complicate management of alerts (for example when you\nneed to show alerts in more than three different positions).\n\nIn this case you can pass the position directly to the alert. The alerts without\nindividual position property will take it from the Provider.\nInstead, passing the position to methods `show`, `success`, `info`, `error` will\noverlap the Provider's position.\n\nPassing the property `position` will look like this:\n\n```js\nalert.show('Oh look, an alert!', { position: positions.BOTTOM_LEFT })\n```\n\nAn example of showing alerts simultaneously in three different positions:\n\n```js\nimport React from 'react'\nimport { render } from 'react-dom'\nimport {\n  Provider as AlertProvider,\n  useAlert,\n  positions,\n  transitions\n} from '@afzalimdad9/react-alert'\nimport AlertTemplate from '@afzalimdad9/react-alert-template-basic'\n\nconst alertOptions = {\n  offset: '25px',\n  timeout: 3000,\n  transition: transitions.SCALE\n}\n\nconst App = () => {\n  const alert = useAlert()\n\n  const showAlert = () => {\n    alert.show('Oh look, an alert!', { position: positions.BOTTOM_LEFT }) //alert will be shown in bottom left\n    alert.show('Oh look, an alert!', { position: positions.BOTTOM_RIGHT }) //alert will be shown in bottom right\n    alert.show('Oh look, an alert!') //alert will use the Provider's position `top right`\n  }\n\n  return <button onClick={showAlert}>Show Alert</button>\n}\n\nconst Root = () => (\n  <AlertProvider template={AlertTemplate}>\n    <AlertProvider\n      template={AlertTemplate}\n      position={positions.TOP_RIGHT} //default position for all alerts without individual position\n      {...alertOptions}\n    >\n      <App />\n    </AlertProvider>\n  </AlertProvider>\n)\n\nrender(<Root />, document.getElementById('root'))\n```\n","readmeFilename":"README.md"}