# @unoverlays/react

> With pnpm: ```sh pnpm add @unoverlays/react ```

Latest version **0.7.4** (published 2023-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @unoverlays/react
pnpm add @unoverlays/react
yarn add @unoverlays/react
bun add @unoverlays/react
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.7.4 |
| Published | 2023-04-30 |
| First published | 2023-03-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 72 |
| Maintainers | tuimao |
| Keywords | unified, overlay, component |

## Links

- npm: https://www.npmjs.com/package/@unoverlays/react
- Repository: https://github.com/TuiMao233/unoverlays
- Homepage: https://github.com/TuiMao233/unoverlays#readme
- Issues: https://github.com/TuiMao233/unoverlays/issues
- npm.io page: https://npm.io/package/@unoverlays/react

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [pascal-case](https://npm.io/package/pascal-case.md) ^3.1.2
- [@unoverlays/utils](https://npm.io/package/@unoverlays/utils.md) 0.4.3

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.7.4 (latest) — 2023-04-30
- 0.7.3 — 2023-04-28
- 0.7.2 — 2023-04-26
- 0.7.1 — 2023-04-07
- 0.7.0 — 2023-04-07
- 0.6.1 — 2023-03-31
- 0.6.0 — 2023-03-31
- 0.3.4 — 2023-03-14
- 0.3.3 — 2023-03-12
- 0.3.1 — 2023-03-11
- 0.3.0 — 2023-03-11

## README

# Getting Started

## Install

With pnpm: 
```sh
pnpm add @unoverlays/react
```

With yarn:
```sh
yarn add @unoverlays/react
```

## Usage

### Step 1: Define Component

Unoverlays is suitable for most components, and using useOverlayMeta allows for finer control over the component process.

```tsx
// overlay.tsx
export function OverlayComponent(props) {
  const { visible, resolve, reject } = useOverlayMeta({
    // Duration of overlay animation, helps prevent premature component destruction
    animation: 1000,
  })

  return <div className={visible && 'is--visible'}>
    <span onClick={() => resolve(`${props.title}:confirmed`)}> Confirm </span>
  </div>
}
```

### Step 2: Create Overlay

You can convert the component into a modal dialog box by using the `defineOverlay` method, which allows you to call it in Javascript / Typescript.
```ts
import { defineOverlay } from '@unoverlays/react'
import { OverlayComponent } from './overlay'

// Convert to imperative callback
const callback = defineOverlay(OverlayComponent)
// Call the component and get the resolve callback value
const value = await callback({ title: 'callbackOverlay' })
// value === "callbackOverlay:confirmed"
```

You can also directly call the component through `renderOverlay`, bypassing the `defineOverlay` method.

```ts
import { renderOverlay } from '@unoverlays/react'
import { OverlayComponent } from './overlay'

const value = await renderOverlay(OverlayComponent, {
  props: { title: 'useOverlay' }
})
// value === "useOverlay:confirmed"
```

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