Reactjs-popup
Reactjs-popup 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
This is a simple Demo to demonstrate how you can create Modals, Tooltips, Menus using reactjs-popup .
Installing / Getting started
This package is available in NPM repository as reactjs-popup. It will work correctly with all popular bundlers.
Include the Component
To start using reactjs popup you just need to import the component from the reactjs-popup package.
Documentation
Contributing
Clone Repo
Fork and then clone the repo
Start Developing
Install all npm scripts:
we use storybook to build popup use cases.
To start storybook:
Run Test in watch mode
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 .
If you want to contribute check out the help wanted 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.
Show Your Support
That’s all, thank you for your attention, please the repo to show your support.
How to create a popup modal in React
In this tutorial, you will learn to create a session based popup modal in React. we will be using bootstrap4 for styling.
You can create a fresh new project using create-react-app to follow along this tutorial. First lets load bootstrap CDN links in public/index.html
We will need to load boostrap css along with bootstrap js, jQuery and popper js.
This is what you final index.html should look like
Now lets go ahead and create a modal component. You can create modal component inside src folder src/Modal.js
How this react popup modal will work
- First we are going to create a state using useState hook
- Then add two methods showModal and closeModal to show hide modal
- It will be session based so each time a new tab is opened
- The popup will apper after 2 seconds
- The next time modal will appear only if user closes the tab and opens new one
- This way we dont annoy user by showing modal each time
- This is how your final Modal.js should look like
Now that we have our modal, you can import modal to App.js and use
Styling react popup modal
Finally lets add some styling to have box shadow effect on popup modal so that it looks better. You can put the following css in src/index.css
Conclusion
Congratulations. you have build a react popup modal using bootstrap. This is a very simple bootstrap modal that you can customize further the way you like.
If you have any issues or suggestions, leave your comments below. Thanks.
Introducing reactjs-popup �� (3kb)—React popup, Modals, Tooltips and Menus — All in one
This article is about giving you a simple overview of what you can do with reactjs-popup and how to use it effectively.
Today, we are excited to announce reactjs-popup 1.0.
R eactjs-popup is a simple and very small (3 kb) react popup component, with multiple use cases.
we created reactjs-popup to create a color picker for our project picsrush a new online image editor. After a while, We decided to make it available for everyone in GitHub and npm repository.
Why do you need to choose reactjs-popup over all other implementation?
- Built with react fragment that’s mean no additional wrapper Divs in your code or in the trigger element. ��
- Does not inject HTML outside your app root. ��
- Function as children pattern to take control over your popup anywhere in your code. ��
- Modal, Tooltip, Menu, Toast(coming soon) : All in one component��️
- Full style customization. ��
- Easy to use. ��
- All these clocks in at around 3 kB zipped. ⚡️
- Animation (coming soon).
How can reactjs-popup help you in your next react project?
If you need to create a simple modal, tooltip or a nested menu this component is your best choice to start with. but first let get started with the component.
Getting Started
This package is available in npm repository as reactjs-popup. It will work correctly with all popular bundlers.