React Mini Modal

React Mini Modal is a minimalist and easy-to-style modal component for React.

Prerequisites

• Node.js (Version 18.16.0)
• NPM
• (Recommended IDE) VSCode

My Table of Content

• Installation
• Minimal Basic Usage
• Modal Props
• Example with Button Component
• Button Props
• Advanced Styling
  • CSS Class Description
  • DOM Structure

Installation

You can install the react-mini-modal package using npm:

npm install @loumorganrene/react-mini-modal

Minimal Basic Usage

Import Modal in your React component:

import Modal from '@loumorganrene/react-mini-modal';

Implement Modal in your React component:

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

  return (
    <div>
        <button onClick={() => setOpen(!open)}>Open Modal</button>

        <Modal
          content="Here is your modal's content"
          open={open}
          onClose={() => setOpen(false)}
        />
      </div>
  )
}

In the above example, the Modal component is rendered with only the required props such as content, open, and onClose.

Modal Props

The Modal component offers some more props to facilitate is styling:

| Prop | Type | Description | Required | Default Value | | ---- | ---- | ----------- | -------- | ------------- | | title | string | The title of the modal. | No | - | | content | string | The content of the modal. | Yes | - | | height | string | The height of the modal. | No | - | | width | string | The width of the modal. | No | - | | color | string | The color of the modal text. | No | "#6b7280" | | footerButton | JSX.Element | A custom button component for the modal footer. | Yes | - | | backgroundColor | string | The background color of the modal. | No | "#fff" | | open | boolean | Boolean indicating whether the modal is open or closed. | Yes | false | | onClose | () => void | Callback function to be called when the modal is closed. | Yes | - |

Example with Button Component

The Modal component is distributed with a minimalist Button component to facilitate the addition of a footerButton if needed. Here's a example including it :

Import Button in your React component:

import Button from '@loumorganrene/react-mini-modal';

Implement Button as the footerButton prop value of your Modal component:

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

  return (
    <div>
        <button onClick={() => setOpen(!open)}>Open Modal</button>

        <Modal
          content="Here is your modal's content"
          footerButton={<Button onClick={() => setOpen(false)} content="This button close the modal" />}
          open={open}
          onClose={() => setOpen(false)}
        />
      </div>
  )
}

Button Props

The Button component require only two props:

| Prop | Type | Description | Required | | ------- | ------------------ | --------------------------------------- | -------- | | content | string | The text content of the button. | Yes | | onClick | () => void | Callback function for click event. | Yes |

Advanced Styling

Aside from using the provided styling props such as color, width or backgroundColor, the appearance of the Modal component can be customized using CSS classes. Here's the available BEM's CSS classes :

CSS Class Description

| Class| Description | | ----------------------------------- | -------------- | |.modal__background | Styles the background overlay of the modal window. By default, it sets the coverage on the entire viewport and applies a blurry effect.| | .modal__wrapper | Styles the modal wrapper element. By default, it positions the modal at the center of the screen and applies a box shadow.| | .modal | Styles the modal content container. By default, it sets the gap between elements and the font styling.| | .modal__header | Styles the header of the modal. By default, it provided an empty space to displays the title.| | .modal__title | Styles the title of the modal. By default, it's applied on a h2.| | .modal__body | Styles the body of the modal. By default, it provided an empty space to displays the content.| | .modal__content | Styles the content of the modal. By default, it's applied on a p.| | .modal__footer | Styles the footer of the modal. By default, it provided an empty space to displays buttons or elements added through the footerButton prop.| | .modal__btn | Styles this library Button component.| | .modal__btn--close | Styles the close button icon. By default, it positions the icon at the top right corner of the modal.|

DOM Structure

<!-- Background Page Covering/Blurrying -->
<div className='modal__background'>
            <div className='modal__wrapper'>
            <div className='modal'>
                <!-- Close Icon -->
                <button className='modal__btn modal__btn--close' />

                <!-- Header with Title -->
                <div className="modal__header">
                    <h2 className="modal__title" />
                </div>

                <!-- Body with Content -->
                <div className="modal__body">
                    <p className="modal__content" />
                </div>

                <!-- Footer with footerButton -->
                <div className="modal__footer">
                    <button className='modal__btn' />
                </div>
            </div>
        </div>
    </div>