# Reactjs-popup [![Build Status][build-badge]][build] [![npm bundle size][npm-bundle-size]][build] [![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] [![All Contributors](https://img.shields.io/badge/all_contributors-16-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] [![Watch on GitHub][github-watch-badge]][github-watch] [![Star on GitHub][github-star-badge]][github-star] [![Tweet][twitter-badge]][twitter] [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. You should consider using reactjs-popup for those couple of reasons : - **βœ… Modal, Tooltip, MenuΒ : All in one library πŸ‹οΈ** - **βœ… Very tiny library (3kb) ⚑️** - **βœ… Fully accessible** - **βœ… Function as children pattern to take control over your popup anywhere in your code πŸ’ͺ** - **βœ… Easy to use πŸš€** - **βœ… TypeScript Support πŸ‘Œ** - **βœ… IE Support. πŸš€** - **βœ… Full style customization πŸ‘Œ (js, CSS, styled-components)** - **βœ… Support for controlled Modals & Tooltips** - **βœ… Default & Custom Animations** ## Demo This is a simple Demo to demonstrate how you can create Modals, Tooltips, Menus using `reactjs-popup`. [**Live Demo**](https://react-popup.elazizi.com) ![ reactjs popup demo](https://user-images.githubusercontent.com/11137944/92184555-74556c00-ee49-11ea-81c5-eb2a0087e93a.gif) ## Installing / Getting started This package is available in NPM repository as reactjs-popup. It will work correctly with all popular bundlers. ```bash npm install reactjs-popup --save ``` Using yarn ```bash yarn add reactjs-popup ``` ## Include the Component To start using reactjs popup you just need to import the component from the reactjs-popup package. ```jsx import React from 'react'; import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; export default () => ( Trigger} position="right center">
Popup content here !!
 ); ``` # Documentation - [Getting Started](https://react-popup.elazizi.com/) - [Modals, Tooltips, Menus examples ](https://react-popup.elazizi.com/react-modal) - [Custom Styling](https://react-popup.elazizi.com/css-styling) - [Controlled Components](https://react-popup.elazizi.com/controlled-popup) - [Animations](https://react-popup.elazizi.com/react-popup-animation) - [Migrating from V1 to V2 ](https://react-popup.elazizi.com/migrate-from-v1-to-v2) # Contributing ### Clone Repo Fork and then clone the repo git clone git@github.com:your-username/reactjs-popup.git ### Start Developing Install all npm scripts: npm install or yarn install we use [storybook](https://storybook.js.org/) to build popup use cases. To start storybook: ``` yarn storybook ``` Run Test in watch mode ``` yarn test ``` To 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 . Make Changes πŸ˜€. If 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. Before submitting a pull request run `npm run test` to run the unit tests . ## Licensing The code in this project is licensed under MIT license. # Show your support! ## Sponsor if you are interested to Sponsor this library and list your logo in this section, [Make sure to contact me](https://twitter.com/ElaziziYoussouf). ## Show Your Support Buy Me A Coffee
That's all, thank you for your attention, please [![Star on GitHub][github-star-badge]][github-star] the repo to show your support. we are all made of stars [![Star on GitHub][github-star-badge]][github-star] ## Maintainers

Youssouf EL Azizi
[build-badge]: https://img.shields.io/travis/yjose/reactjs-popup.svg?style=flat-square [npm-bundle-size]: https://img.shields.io/bundlephobia/minzip/reactjs-popup?style=flat-square [build]: https://travis-ci.org/yjose/reactjs-popup [version-badge]: https://img.shields.io/npm/v/reactjs-popup.svg?style=flat-square [package]: https://www.npmjs.com/package/reactjs-popup [downloads-badge]: https://img.shields.io/npm/dt/reactjs-popup.svg?style=flat-square [npmtrends]: http://www.npmtrends.com/reactjs-popup [license-badge]: https://img.shields.io/npm/l/reactjs-popup.svg?style=flat-square [license]: https://github.com/yjose/reactjs-popup/blob/master/LICENSE [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square [prs]: http://makeapullrequest.com [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square [coc]: https://github.com/yjose/reactjs-popup/blob/master/CODE_OF_CONDUCT.md [github-watch-badge]: https://img.shields.io/github/watchers/yjose/reactjs-popup.svg?style=social [github-watch]: https://github.com/yjose/reactjs-popup/watchers [github-star-badge]: https://img.shields.io/github/stars/yjose/reactjs-popup.svg?style=social [github-star]: https://github.com/yjose/reactjs-popup/stargazers [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 [twitter-badge]: https://img.shields.io/twitter/url/https/github.com/yjose/reactjs-popup.svg?style=social [all-contributors]: https://github.com/yjose/all-contributors