repopup v1.2.2

The aim of REPopup is to provide an all-in-one UI components related to modal and popup windows for creating apps in react. There are many great ui components made by developers all around open source. REPopup makes using modals and popups very easy by giving you a ready made as well as easily customizable kit with consistent api and look and feel.

Features

• React modal components for easy and fast web development.
• Flexible modal positioning.
• Styled components and easy to customize.
• Works in major browsers without polyfills.
• Ready made and well designed InputDialog component.
• Alert component with five different variants.
• Supports TypeScript.
• And much more !

Resources

• Demo
• Documentation
• Playground
• CodeSandbox

Installation

Install via NPM

npm install repopup

Install via Yarn

yarn add repopup

Peer dependencies

Install styled-components

Install via NPM

npm install styled-components

Install via Yarn

yarn add styled-components

If you have any issues installing styled-components, check out their installation guide here.

Getting Started

For complete usage, visit the docs.

The below example demonstrates very basic and full usages of Modal component respectively.

• Initialize a open state with boolean value false and assign it as 'open' prop. Now it will control wheather Modal should be open or closed.
• For onRequestClose prop, pass the Function which will set the open state to false

npm install repopup styled-components

Import the RepopupProvider and wrap your App component

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

Import the component and use it in your project

Basic Usage

import React, { useState } from 'react';
import { Modal } from 'repopup';

function App() {
  const [open,setOpen] = useState(false);

return (
  <div>
	<button onClick={() => setOpen(true)}>Open</button>
	<Modal 
      onRequestClose={() => setOpen(false)} 
      open={open} 
      title={`Hello From REPopup 🎉🎉🎉 `} 
     />
</div>
);
}

export default App;

Result

Full Usage

import React, { useState } from 'react';
import { Modal } from 'repopup';

function App() {
  const [open,setOpen] = useState(false);

  return (
   <div>
	 <button onClick={() => setOpen(true)}>Open</button>
	      <Modal
				onRequestClose={() => setOpen(false)}
				open={open}
				title={`Are you sure?`}
				subtitle={`You won't be able to revert this!`}
				icon="warning"
				closeOnBackdropClick={true}
				showConfirmButton
				confirmButtonText={`Yes,delete it!`}
				onConfirm={() => console.log('Deleted successfully!!')}
				showDenyButton
				denyButtonText="Cancel"
				onDeny={() => setOpen(false)}
			/>
		</div>
  );
}

export default App;

Result

Available Props

Support

License

REPopup is licensed under the MIT License.