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

Install the REPopup and styled-components package from the NPM

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

| Props | Type | Description | Default | | :-------------: | :---------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | :----------: | | background | string | Popup window background (CSS background property). | '#ffffff' | | cancelButtonText | string | Use this to change the text on the "Cancel"-button. | Cancel | | childrenAfterDefaultContent | ReactNode | null | Use this to place children after default content of the popup |null | childrenBeforeDefaultContent | ReactNode | null | Use this to place children before default content of the popup |null | closeOnBackdropClick | boolean | Wheather or not to close the popup on clicking the backdrop | true | | color | string | Color for title and content | '#000000' | | confirmButtonText | string | Use this to change the text on the "Confirm"-button. | 'Confirm' | | customClass | IModalCustomClassType; | A custom CSS class for the popup | {} | | denyButtonText | string | Use this to change the text on the "Deny"-button. | 'Deny' | | icon | success| error| info| warning| question| null | varinat of a icon to be shown | null | | onCancel | React.MouseEventHandler<HTMLButtonElement> | undefined | Use this as a click handler for the "Cancel"-button. | () => {} | | onConfirm | React.MouseEventHandler<HTMLButtonElement> | undefined | Use this as a click handler for the "Confirm"-button | () => {} | | onDeny | React.MouseEventHandler<HTMLButtonElement> | undefined | Use this as a click handler for the "Deny"-button. | () => {} | | onRequestClose | Function | Function that will be run when the modal is requested to be closed | required | | onSuccess | React.MouseEventHandler<HTMLButtonElement> | undefined | Use this as a click handler for the "Success"-button. | () => {} | | open | boolean | Boolean describing if the modal should be shown or not. | required | | placement | 'top'| 'center' | 'bottom'| 'center-start'| 'bottom-start'| 'top-start'| 'top-end'| 'bottom-end'| 'center-end' | Use this to change Popup window position | center | | showCancelButton | boolean | If set to true, a "Cancel"-button will be shown. | false | | showConfirmButton | boolean | If set to true, a "Confirm"-button will be shown. | false | | showDenyButton | boolean | If set to true, a "Deny"-button will be shown. | false | | showSuccessButton | boolean | If set to true, a "Success"-button will be shown. | false | | subtitle | string | Used for a description for the popup. | | | successButtonText | string | Use this to change the text on the "Success"-button. | Ok | | title | string | Used for the title of the popup | |

Support

License

REPopup is licensed under the MIT License.