Package Exports
- @soeunlee/reactjs-modal
- @soeunlee/reactjs-modal/dist/cjs/index.js
- @soeunlee/reactjs-modal/dist/esm/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@soeunlee/reactjs-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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;