@morganlethuaut/react-modal-component/README.md

A reusable React modal component.

# **React Modal Component**

A simple, reusable React modal component.

## 🚀 **Installation**

Install the component with:

```bash
# 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:

```js
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.

```js
<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.<br>
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:

```jsx
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