# @signed-a/react-modal-component

> Modal component constructed to be design independent.

Latest version **3.0.1** (published 2022-08-28) · 0 weekly downloads

## Install

```sh
npm install @signed-a/react-modal-component
pnpm add @signed-a/react-modal-component
yarn add @signed-a/react-modal-component
bun add @signed-a/react-modal-component
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2022-08-28 |
| First published | 2022-08-16 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 79.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Yannick Lefaivre |
| Maintainers | signed-a |
| Keywords | react, modal, component, customizable |

## Links

- npm: https://www.npmjs.com/package/@signed-a/react-modal-component
- Repository: https://github.com/YannickLefaivre/react-modal-component
- Homepage: https://github.com/YannickLefaivre/react-modal-component#readme
- Issues: https://github.com/YannickLefaivre/react-modal-component/issues
- npm.io page: https://npm.io/package/@signed-a/react-modal-component

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.1 (latest) — 2022-08-28
- 2.2.0 — 2022-08-26
- 2.1.0 — 2022-08-24
- 2.0.2 — 2022-08-24
- 2.0.0 — 2022-08-24
- 1.1.1 — 2022-08-17
- 1.0.1 — 2022-08-16
- 1.0.0 — 2022-08-16

## README

# React Modal Component

React Modal Component is a fully customizable modal.

> I followed this two tutorials: ["Creating a library of React components using Create React App"](https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b) and ["Publish React components as an npm package"](https://levelup.gitconnected.com/publish-react-components-as-an-npm-package-7a671a2fb7f) in order to start the creation of this package.

## 1. Installation

> **Note: You will need at least react 17 to use this package.**

```
npm install @signed-a/react-modal-component
```

## 2. Usage

> **IMPORTANT !** Since version 2.2.0 of the package, if you do not provide the `title` prop no header will be rendered and the `subHeaderContent` prop will have no effect. _Also, the `subHeaderContent` prop replaces the `headerContent` prop that was removed from the modal component._

> **IMPORTANT !** With version 2.2.0, the `footerContent` prop no longer removes the default buttons from the modal. You'll have to explicitly remove them by providing the `hideCancelButton` and `hideConfirmButton` props so the modal won't render them.

### 2.1 Basic

There are two ways to use the Modal component:

- The first is to include it directly at the same level of the component tree as the button that opens it and to use its props to customize its appearance.

```
// routes/Landing.jsx

import {
    Modal,
    useModal,
    MODAL_OPEN_STATE,
} from "@signed-a/react-modal-component/dist" // Import only the ES Module distribution because the umd distribution does not have autocompletion and does not indicate the type of the component props.

// don't forget to add the style that participates in the logic of
// opening and closing the modal.
//
// NEW ! Now the modal has a default style.
import "@signed-a/react-modal-component/dist/style.css"

... // other import statements
import "./Landing.style.css"

const Landing = () => {
    const modal = useModal(MODAL_OPEN_STATE.CLOSED)

    return (
        <>
            ...

            <main>
                ...

                <button
                    // retrieve the reference of the open button in
                    // order to give it focus when closing the modal
                    ref={modal.openButtonRef}

                    onClick={modal.open}
                    className="button success-button"
                >
                    Open success modal
                </button>
            </main>

            <Modal
                isOpen={modal.isOpen}
                handleClickOnCloseButton={modal.close}
                handleClickOutside={modal.clickOutside}
                title="Success"
                hideCancelButton
                hideConfirmButton
                styleModifier={{
                    footer: "success-modal__content__footer",
                }}
            >

                <p className="success-modal__content__main__success-text">Employee created!</p>
            </Modal>
        </>
    )
}
```

- And the other, to encapsulate it in your different types of modal component (simple modal, lightbox, etc...). To include, your modal presets/customizations in your own component library.

```
// component-library/SpecificModalType.jsx

import { Modal } from "@signed-a/react-modal-component/dist"
import "@signed-a/react-modal-component/dist/style.css"
... // other import statements
import "./SpecificModalType.style.css"

const SpecificModalType = ({
    isOpen,
    handleClickOnCloseButton,
    handleClickOutside,
}) => {
    return (
        <Modal
            isOpen={isOpen}
            handleClickOnCloseButton={handleClickOnCloseButton}
            handleClickOutside={handleClickOnCloseButton}
            title="Success"
            hideConfirmButton
            hideCancelButton
            styleModifier={{
                footer: "success-modal__content__footer",
            }}
        >

            <p className="success-modal__content__main__success-text">Employee created!</p>
        </Modal>
    )
}

// routes/Landing.jsx

import { MODAL_OPEN_STATE, useModal } from "@signed-a/react-modal-component/dist"
import { SpecificModalType } from "./path/to/your/component/library/folder"
... // other import statements

const Landing = () => {
    const modal = useModal(MODAL_OPEN_STATE.CLOSED)

    return (
        <>
            ...

            <main>
                ...

                <button
                    // retrieve the reference of the open button in
                    // order to give it focus when closing the modal
                    ref={modal.openButtonRef}

                    onClick={modal.open}
                    className="button success-button"
                >
                    Open success modal
                </button>
            </main>

            <SpecificModalType
                isOpen={modal.isOpen}
                handleClickOnCloseButton={modal.close}
                handleClickOutside={modal.clickOutside}
            />
        </>
    )
}
```

## 2. Change tracking

Please remember to consult the [CHANGELOG.md](https://github.com/YannickLefaivre/react-modal-component/blob/main/CHANGELOG.md) file in order to be aware of the latest changes to the package.

_Such as the temporary removal of the umd build for the 3.0.0 version of the package._

## 3. Consult the documentation

Documentation of the code can be found in the docs folder. By opening the [project github page](https://yannicklefaivre.github.io/react-modal-component/), you will have access to this file _(README.md)_ as well as to the documentation of the modal component.

---
_Source: https://npm.io/package/@signed-a/react-modal-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._