1.0.3 • Published 2 years ago
@soeunlee/reactjs-modal v1.0.3
Modal dialog component for React.JS
Installation
To install, you can use npm :
$ npm install --save @soeunlee/reactjs-modalFeatures
- Provides a straightforward implementation of a modal interface, featuring a dark background, a body section, and a footer that includes a close button.
- Enhance the customization of the modal by assigning classnames to the modal content, button, and individual containers, allowing for personalized styling and layout adjustments.
- Seamlessly integrate with widely adopted CSS frameworks such as Tailwind and Bootstrap to leverage their extensive styling capabilities and streamline the development process.
Mandatory props
| Name | Type | Description |
|---|---|---|
| onClose | MouseEventHandler | A function to handle the close event of the modal when the close button is clicked. |
| setModalOpen | boolean | A boolean value indicating whether the modal should be open or closed. |
| children | React.ReactNode | The content or components that will be displayed inside the modal. |
| btnLabel | string | A string representing the label or text content of the close button. |
Optional props for customization
| Name | Type | Description |
|---|---|---|
| backgroundClass | string (optional) | A string representing additional CSS class names for the background element of the modal. |
| containerClass | string (optional) | A string representing additional CSS class names for the container element of the modal. |
| bodyClass | string (optional) | A string representing additional CSS class names for the body element of the modal. |
| footerClass | string (optional) | A string representing additional CSS class names for the footer element of the modal. |
| btnClass | string (optional) | A string representing additional CSS class names for the close button of the modal. |
| btnLabelClass | string (optional) | A string representing additional CSS class names for the label or text content of the close button. |
Basic examples
Here is a simple example of react-modal being used in an app with some custom classnames to style the modal
import React, { useState } from 'react';
import { Modal } from '@soeunlee/reactjs-modal';
function App() {
const [isModalOpen, setIsModalOpen] = useState < boolean > false;
return (
<>
<button onClick={() => setIsModalOpen(true)}>Click to open Modal</button>
<Modal
onClose={() => setIsModalOpen(false)}
setModalOpen={isModalOpen}
children={
<div>
<h1>Modal is opened!</h1>
</div>
}
btnLabel="close"
/>
</>
);
}
export default App;