# modal-provider-react

> Open and populate modals from anywhere in your React DOM

Latest version **1.0.0** (published 2023-10-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install modal-provider-react
pnpm add modal-provider-react
yarn add modal-provider-react
bun add modal-provider-react
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-10-17 |
| First published | 2023-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Geza Kerecsenyi |
| Maintainers | gezakerecs |
| Keywords | react, typescript, modal, hooks |

## Links

- npm: https://www.npmjs.com/package/modal-provider-react
- Repository: https://github.com/gezakerecsenyi/modal-provider-react
- Homepage: https://github.com/gezakerecsenyi/modal-provider-react#readme
- Issues: https://github.com/gezakerecsenyi/modal-provider-react/issues
- npm.io page: https://npm.io/package/modal-provider-react

## Dependencies (2)

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.2.0
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^6.4.2

## 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

- 1.0.0 (latest) — 2023-10-17

## README

# `modal-provider-react`
**Open and populate modals from anywhere in your React DOM**

### Usage

 - Initialize using the `<ModalProvider>` wrapper.

```tsx
// index.tsx

import ModalProvider from 'modal-provider-react';

createRoot(document.getElementById('root')!)
    .render(
        <React.StrictMode>
            <ModalProvider>
                {/* rest of your app here */}
            </ModalProvider>
        </React.StrictMode>
    );
```

 - Create your modal components, accepting props of type `{ data }: ModalProps<T>` (with `T` the user-defined type of the data you'll provide to your modal).
```tsx
// MyAuthModal.tsx

// modal-provider-react comes with a built-in <FormattedModal>, but you can use your own too
import { FormattedModal, ModalProps } from 'modal-provider-react';

export default function MyAuthModal({ data }: ModalProps<MyUserType>) {
    return (
        <FormattedModal className='auth'>
            <h1>Hi, {data.displayName}</h1>
        </FormattedModal>
    );
}
```

 - Declare your modal to the `ModalProvider`.

```tsx
// index.tsx

import ModalProvider, { UseModal } from 'modal-provider-react';

createRoot(document.getElementById('root')!)
    .render(
        <React.StrictMode>
            <ModalProvider>
                <UseModal name='auth'>
                    <MyAuthModal />
                </UseModal>
                
                {/* rest of your app here */}
            </ModalProvider>
        </React.StrictMode>
    );
```

 - Whenever you wish to launch a modal or close the currently-active modal, use the `useModal` hook.

```tsx
// Home.tsx

import { useModal } from 'modal-provider-react';

export default function Home() {
    const {
        launchModal,
        clearModal
    } = useModal();

    const currentUser: MyUserType = {
        displayName: 'John Smith',
        email: 'john@example.com',
    };

    return (
        <div className='home-page'>
            <button
                className='user-settings'
                onClick={() => launchModal('auth', currentUser)}
            >
                My settings
            </button>
        </div>
    );
}
```

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