Skip to main content

REPopup

Easy to use and customizable react modals and components related to it.

Easy To Customize

REPopup is designed from the ground up to be easily customized with help of custom CSS classes and inline CSS styles.

It Just Works

Sensible default styling. Uses inline styles and styled-components, so no need to import a separate css file. Just wrap your app with simple Provider.

react

React Hooks API

REPopup ships with a few hooks that let you access the some components and state related to them,so that you can write clean and concise code.

How to get started?

1. Install the REPopup and styled-components package from the NPM

npm install repopup styled-components

2. Import the RepopupProvider and wrap your App component.

import { RepopupProvider } from 'repopup';

ReactDOM.render(
<RepopupProvider theme="dark">
<App />
</RepopupProvider>,
document.getElementById('root')
);

3. Import the component and use it in your project

import { Modal } from 'repopup';

<Modal onRequestClose={() => setOpen(false)} open={open} title={"Hello From REPopup 🎉🎉🎉 "} />