React Modal Component

A simple, reusable React modal component.

🚀 Installation

Install the component with:

# npm
npm install @morganlethuaut/react-modal-component

# yarn
yarn add @morganlethuaut/react-modal-component

# pnpm
pnpm add @morganlethuaut/react-modal-component

# bun
bun add @morganlethuaut/react-modal-component

Once the package is installed, you can use the modal with it:

import Modal from '@morganlethuaut/react-modal-component'

Features

• ✅ Simple and reusable
• ⚛️ Fully typed with TypeScript
• ♿️ Accessible (aria tags + focus control)
• 🚫 Optional close button

Usage

The modal is used as a simple React component that accepts any content.

<Modal>
    // your code...
</Modal>

Props

Some properties are mandatory:

show

show is a Boolean state indicating whether the modal is open or not.

• type: boolean
• required

setShow

To manipulate the state of the show property, the modal expects the setShow update function.

• type: React.Dispatch<React.SetStateAction<boolean>>
• required

Properties that are not mandatory:

className

Adding classes.

• type: string

toFocus

The focus element when the modal window is open.
By default, the modal focuses the close button.

• type: React.RefObject<HTMLElement | null>

ariaLabelledby

Identifies the element (or elements) that labels the element it is applied to.

• type: string

ariaDescribedby

Identifies the element (or elements) that describes the element on which the attribute is set.

• type: string

disabledCloseBtn

Deactivates the default close button.

• type: string

Exemple

Here's an example of how to use a React component to display a message in a modal window:

import { useState } from 'react'

import Modal from '@morganlethuaut/react-modal-component'

export default function Welcome()
{
    const [SHOW, setShow] = useState(false)

    return <>
        <button
        type="button"
        onClick={() => setShow(true)}
        >
            Display welcome message !
        </button>

        <Modal
        show={SHOW}
        setShow={setShow}
        ariaLabelledby="label"
        ariaDescribedby="description"
        >
            <h2
            id="label"
            >
                Welcome !    
            </h2>

            <p
            id="description"
            >
                This is a message to welcome you.
            </p>
        </Modal>
    </>
}

License

This component is distributed under the ISC license.
© 2025 Morgan Le Thuaut