{"_id":"@aloushek/reactjs-popup","_rev":"5-ee4bccd024e4b18f83b121c667c13aa9","time":{"2.0.6":"2021-10-08T13:47:04.795Z","created":"2021-10-11T06:09:24.771Z","2.0.7":"2021-10-11T06:09:25.038Z","modified":"2022-04-04T13:37:36.490Z"},"name":"@aloushek/reactjs-popup","dist-tags":{"latest":"2.0.7"},"versions":{"2.0.7":{"name":"@aloushek/reactjs-popup","version":"2.0.7","description":"React Popup Component - Modals,Tooltips and Menus —  All in one","main":"dist/index.js","module":"dist/reactjs-popup.esm.js","umd:main":"dist/reactjs-popup.umd.production.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"SET NODE_ENV=production tsdx build --entry src/index.tsx  --format=cjs,esm,umd","test":"tsdx test --passWithNoTests --env=jest-environment-jsdom-sixteen","lint":"tsdx lint","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","np":"np --any-branch"},"peerDependencies":{"react":">=16","react-dom":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"devDependencies":{"@babel/core":"^7.11.1","@storybook/addon-actions":"^6.0.7","@storybook/addon-docs":"^6.0.7","@storybook/addon-essentials":"^6.0.7","@storybook/addon-info":"^5.3.19","@storybook/addon-links":"^6.0.7","@storybook/addons":"^6.0.7","@storybook/react":"^6.0.7","@testing-library/jest-dom":"^5.11.4","@testing-library/react":"^10.4.9","@testing-library/user-event":"^12.1.3","@types/react":"^16.9.46","@types/react-dom":"^16.9.8","autoprefixer":"^9.8.6","babel-loader":"^8.1.0","cssnano":"^4.1.10","husky":"^4.2.5","identity-obj-proxy":"^3.0.0","jest":"^26.4.2","jest-environment-jsdom-sixteen":"^1.0.3","np":"^6.5.0","react":"^16.13.1","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.13.1","react-is":"^16.13.1","rollup-plugin-postcss":"^3.1.8","ts-loader":"^8.0.2","tsdx":"^0.13.2","tslib":"^2.0.1","typescript":"^3.9.7"},"jest":{"moduleNameMapper":{"\\.(css|less)$":"identity-obj-proxy"}},"dependencies":{},"author":{"name":"Youssouf EL AZIZI","email":"youssoufelazizi@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/yjose/reactjs-popup/issues"},"keywords":["react","popup","modal","tooltip","react-modal","reactjs","react-popup","reactjs-popup","reactjs-modal","react-tooltip"],"homepage":"https://react-popup.elazizi.com/","repository":{"type":"git","url":"git+https://github.com/yjose/reactjs-popup.git"},"publishConfig":{"registry":"https://registry.npmjs.org"},"gitHead":"36f42e6764586806e7a7266d57f519ab2338b644","_id":"@aloushek/reactjs-popup@2.0.7","_nodeVersion":"16.6.1","_npmVersion":"7.20.3","dist":{"integrity":"sha512-AEtMTCbjpj88oABMwbXvXFfiMSYbfRajB62CgEshRle1SfRomP8b0As//Yb8RqfS7DH/Cj3CV5Km/BEbtexCSw==","shasum":"fd118397c26c6b2533c4c8fcf286b3e41195b6ce","tarball":"https://registry.npmjs.org/@aloushek/reactjs-popup/-/reactjs-popup-2.0.7.tgz","fileCount":21,"unpackedSize":145592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwx2NCRA9TVsSAnZWagAA5LEP/Aqv7M7Oncu0q62Tu/XT\n2D224ybgtv7BQ38kACGykhLzu6BdVUNHNxlWxCpoBQVkaKd93Omgt6L+6evs\nED/oSW8RqvsYaq8lrdzbd43HMZ1kuEWOhJ/ZFAaJxhR7H//AoH2Z2gEJ3p9a\nwwgiAlPzFc5uGsP7qNzQbj3HU2txRbCWKnGguc5T0qWvxMQgL4gTWcl8dAXg\nLPr8WBWmbA+4EueGwqvC+w3yncbX+af+cKMKh5kV2vXyTScfYqX7WoL3XSY2\nxfB8dN5P6A01qTdGVnLt3dZyPqddOEOKH7GrDK+ryYm6GEPTgTkai4Wlp8PS\nVYGF+O/9vsSf3vdFcWhg51I+IHekr4Pk2Dcd0joW11bI1PrMTxYxWs684xbe\nPXfib2x+axUuSwSrfKvBkaDLagqtfuSo+5Ya/4KFx5+5PSUqsjIpkaRadj3F\nYQrdMdfELuIsOq6AEw+6rdavqKLZrw+nzUjDjaSeTg8h6v+Go9vqD3mTNIHz\nnzdzjnH8chTsTZgR4KjPq2sXibTmWNTKio35hqHIheSgT3PeHhvyVEKdpDkb\nP+lGsX9ZeSfXhGqeh/Akj0/rvI6eZK+naS2eqXo01rTn7RkcP3rPYnBO2kox\noAl3qFcUH8h2IXiOo47Ot8vAPtYiNIzSTXpI2jJOYZHCsolMD8dxTYvwXZcx\nGPaa\r\n=rFLn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmkdDHkJu+/Sr7icpVNENWIcvZzK+xfxDST8pEMAyVLAiA4A1rEmv4hfrJqIzNCNqSmXHON5JsFlow1rY04SKFmPg=="}]},"_npmUser":{"name":"aloushek","email":"aloushdopita@gmail.com"},"directories":{},"maintainers":[{"name":"aloushek","email":"aloushdopita@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/reactjs-popup_2.0.7_1633932564835_0.3511519510652803"},"_hasShrinkwrap":false}},"maintainers":[{"name":"aloushek","email":"aloushdopita@gmail.com"}],"description":"React Popup Component - Modals,Tooltips and Menus —  All in one","homepage":"https://react-popup.elazizi.com/","keywords":["react","popup","modal","tooltip","react-modal","reactjs","react-popup","reactjs-popup","reactjs-modal","react-tooltip"],"repository":{"type":"git","url":"git+https://github.com/yjose/reactjs-popup.git"},"author":{"name":"Youssouf EL AZIZI","email":"youssoufelazizi@gmail.com"},"bugs":{"url":"https://github.com/yjose/reactjs-popup/issues"},"license":"MIT","readme":"# Reactjs-popup\r\n\r\n[![Build Status][build-badge]][build]\r\n[![npm bundle size][npm-bundle-size]][build]\r\n[![version][version-badge]][package]\r\n[![downloads][downloads-badge]][npmtrends]\r\n\r\n[![MIT License][license-badge]][license]\r\n[![All Contributors](https://img.shields.io/badge/all_contributors-16-orange.svg?style=flat-square)](#contributors)\r\n[![PRs Welcome][prs-badge]][prs]\r\n[![Code of Conduct][coc-badge]][coc]\r\n\r\n[![Watch on GitHub][github-watch-badge]][github-watch]\r\n[![Star on GitHub][github-star-badge]][github-star]\r\n[![Tweet][twitter-badge]][twitter]\r\n\r\n[Reactjs-popup](https://react-popup.elazizi.com) is a simple react popup component that helps you create simple and complex Modals, tooltips, and Menus for your next React App.\r\n\r\nYou should consider using reactjs-popup for those couple of reasons :\r\n\r\n- **✅ Modal, Tooltip, Menu : All in one library 🏋️**\r\n- **✅ Very tiny library (3kb) ⚡️**\r\n- **✅ Fully accessible**\r\n- **✅ Function as children pattern to take control over your popup anywhere in your code 💪**\r\n- **✅ Easy to use 🚀**\r\n- **✅ TypeScript Support 👌**\r\n- **✅ IE Support. 🚀**\r\n- **✅ Full style customization 👌 (js, CSS, styled-components)**\r\n- **✅ Support for controlled Modals & Tooltips**\r\n- **✅ Default & Custom Animations**\r\n\r\n## Demo\r\n\r\nThis is a simple Demo to demonstrate how you can create Modals, Tooltips, Menus using `reactjs-popup`.\r\n\r\n[**Live Demo**](https://react-popup.elazizi.com)\r\n\r\n![ reactjs popup demo](https://user-images.githubusercontent.com/11137944/92184555-74556c00-ee49-11ea-81c5-eb2a0087e93a.gif)\r\n\r\n## Installing / Getting started\r\n\r\nThis package is available in NPM repository as reactjs-popup. It will work correctly with all popular bundlers.\r\n\r\n```bash\r\nnpm install reactjs-popup --save\r\n```\r\n\r\nUsing yarn\r\n\r\n```bash\r\nyarn add reactjs-popup\r\n```\r\n\r\n## Include the Component\r\n\r\nTo start using reactjs popup you just need to import the component from the reactjs-popup package.\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport Popup from 'reactjs-popup';\r\nimport 'reactjs-popup/dist/index.css';\r\n\r\nexport default () => (\r\n  <Popup trigger={<button> Trigger</button>} position=\"right center\">\r\n    <div>Popup content here !!</div>\r\n  </Popup>\r\n);\r\n```\r\n\r\n# Documentation\r\n\r\n- [Getting Started](https://react-popup.elazizi.com/)\r\n- [Modals, Tooltips, Menus examples ](https://react-popup.elazizi.com/react-modal)\r\n- [Custom Styling](https://react-popup.elazizi.com/css-styling)\r\n- [Controlled Components](https://react-popup.elazizi.com/controlled-popup)\r\n- [Animations](https://react-popup.elazizi.com/react-popup-animation)\r\n- [Migrating from V1 to V2 ](https://react-popup.elazizi.com/migrate-from-v1-to-v2)\r\n\r\n# Contributing\r\n\r\n### Clone Repo\r\n\r\nFork and then clone the repo\r\n\r\n    git clone git@github.com:your-username/reactjs-popup.git\r\n\r\n### Start Developing\r\n\r\nInstall all npm scripts:\r\n\r\n    npm install\r\n    or\r\n    yarn install\r\n\r\nwe use [storybook](https://storybook.js.org/) to build popup use cases.\r\n\r\nTo start storybook:\r\n\r\n```\r\nyarn storybook\r\n```\r\n\r\nRun Test in watch mode\r\n\r\n```\r\nyarn test\r\n```\r\n\r\nTo make contributing simply you need to create a new story for your use case under `stories` directory to demonstrate the new features or the bug fix .\r\n\r\nMake Changes 😀.\r\n\r\nIf you want to contribute check out the [help wanted](https://github.com/yjose/reactjs-popup/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) issues for things that need fixing.\r\n\r\nBefore submitting a pull request run `npm run test` to run the unit tests .\r\n\r\n## Licensing\r\n\r\nThe code in this project is licensed under MIT license.\r\n\r\n# Show your support!\r\n\r\n## Sponsor\r\n\r\nif you are interested to Sponsor this library and list your logo in this section, [Make sure to contact me](https://twitter.com/ElaziziYoussouf).\r\n\r\n## Show Your Support\r\n\r\n<a href=\"https://www.buymeacoffee.com/yjose\" target=\"_blank\">\r\n  <img\r\n    src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\"\r\n    alt=\"Buy Me A Coffee\"\r\n    height=\"40px\"\r\n  />\r\n</a>\r\n<br />\r\n\r\nThat's all, thank you for your attention, please [![Star on GitHub][github-star-badge]][github-star] the repo to show your support.\r\n\r\nwe are all made of stars [![Star on GitHub][github-star-badge]][github-star]\r\n\r\n## Maintainers\r\n\r\n<table>\r\n  <tbody>\r\n    <tr>\r\n      <td align=\"center\">\r\n        <a href=\"http://elazizi.com/\">\r\n          <img width=\"150\" height=\"150\" src=\"https://github.com/yjose.png?v=3&s=150\">\r\n          </br>\r\n          Youssouf EL Azizi\r\n        </a>\r\n        <div>\r\n          <a href=\"https://twitter.com/ElaziziYoussouf\">\r\n            <img src=\"https://img.shields.io/twitter/follow/ElaziziYoussouf.svg?style=social&label=Follow\" />\r\n          </a>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  <tbody>\r\n</table>\r\n\r\n[build-badge]: https://img.shields.io/travis/yjose/reactjs-popup.svg?style=flat-square\r\n[npm-bundle-size]: https://img.shields.io/bundlephobia/minzip/reactjs-popup?style=flat-square\r\n[build]: https://travis-ci.org/yjose/reactjs-popup\r\n[version-badge]: https://img.shields.io/npm/v/reactjs-popup.svg?style=flat-square\r\n[package]: https://www.npmjs.com/package/reactjs-popup\r\n[downloads-badge]: https://img.shields.io/npm/dt/reactjs-popup.svg?style=flat-square\r\n[npmtrends]: http://www.npmtrends.com/reactjs-popup\r\n[license-badge]: https://img.shields.io/npm/l/reactjs-popup.svg?style=flat-square\r\n[license]: https://github.com/yjose/reactjs-popup/blob/master/LICENSE\r\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\r\n[prs]: http://makeapullrequest.com\r\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\r\n[coc]: https://github.com/yjose/reactjs-popup/blob/master/CODE_OF_CONDUCT.md\r\n[github-watch-badge]: https://img.shields.io/github/watchers/yjose/reactjs-popup.svg?style=social\r\n[github-watch]: https://github.com/yjose/reactjs-popup/watchers\r\n[github-star-badge]: https://img.shields.io/github/stars/yjose/reactjs-popup.svg?style=social\r\n[github-star]: https://github.com/yjose/reactjs-popup/stargazers\r\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20reactjs-popup%20by%20%40ElaziziYoussouf%20https%3A%2F%2Fgithub.com%2Fyjose%2Freactjs-popup%20%F0%9F%91%8D\r\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/yjose/reactjs-popup.svg?style=social\r\n[all-contributors]: https://github.com/yjose/all-contributors\r\n","readmeFilename":"README.md"}