@loumorganrene/react-mini-modal NPM

React Mini Modal

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

Prerequisites

My Table of Content

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>

modal react component

@everything-registry/sub-chunk-560

1.0.1

9 months ago

1.0.0

10 months ago

0.0.1

10 months ago