# react-wus-modal

> My Custom Modal Component

Latest version **1.0.2** (published 2023-05-08) · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-05-08 |
| First published | 2023-05-08 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 15 |
| Unpacked size | 8.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Gilpop8663 |
| Maintainers | wolfye |
| Keywords | react, component, modal |

## Links

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

## Dependencies (15)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [typescript](https://npm.io/package/typescript.md) ^4.9.5
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [@types/jest](https://npm.io/package/@types/jest.md) ^27.5.2
- [@types/node](https://npm.io/package/@types/node.md) ^16.18.26
- [@types/react](https://npm.io/package/@types/react.md) ^18.2.6
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [react-wus-modal](https://npm.io/package/react-wus-modal.md) ^1.0.0
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.4
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.9
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.4.0
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.26
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.5
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## 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.2 (latest) — 2023-05-08
- 1.0.1 — 2023-05-08
- 1.0.0 — 2023-05-08
- 0.0.6 — 2023-05-08
- 0.0.4 — 2023-05-08
- 0.0.3 — 2023-05-08
- 0.0.2 — 2023-05-08
- 0.0.1 — 2023-05-08

## README

# React-Wus-Modal

## Installation

```
$ npm i --save react-wus-modal
$ yarn add react-wus-modal
```

## API documentation

---

### Documentation

#### isOpen : 모달이 활성화 되어 있는 지 Boolean 값으로 확인합니다.

#### onAfterOpen?: 모달이 켜진 후 실행되는 함수를 받습니다.

#### onAfterClose?: 모달이 꺼진 후 실행되는 함수를 받습니다.

#### onRequestClose?: 모달을 비활성화 하는 함수를 받습니다.

#### ariaLabel?: 콘텐츠가 무엇을 의미하는 지 String 값으로 받습니다.

#### zIndex?: CSS의 z-index을 Number 값으로 받습니다.

#### shouldCloseOnEsc?: Esc로 모달을 끌 수 있도록 활성화 할 지 Boolean 값으로 확인합니다.

---

### Props interface

```jsx
  isOpen: boolean;
  onAfterOpen?: () => void;
  onAfterClose?: () => void;
  onRequestClose?: () => void;
  ariaLabel?: string;
  zIndex?: number;
  shouldCloseOnEsc?: boolean;
```

---

## Examples

```jsx
import React, { useState } from "react";
import { Modal } from "react-wus-modal";
import styled from "styled-components";

export default function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const onCloseModal = () => {
    setIsModalOpen(false);
  };

  const onAfterOpen = () => {
    console.log("i am Open");
  };

  const onAfterClose = () => {
    console.log("i am Close");
  };

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>open</button>
      <Modal
        isOpen={isModalOpen}
        onRequestClose={onCloseModal}
        shouldCloseOnEsc={true}
        onAfterOpen={onAfterOpen}
        onAfterClose={onAfterClose}
        zIndex={2}
      >
        <Form>
          <button onClick={onCloseModal}>close</button>
          <input type="text" />
        </Form>
      </Modal>
    </div>
  );
}

const Form = styled.form`
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: fixed;
  width: 380px;
  height: 600px;
  position: absolute;
  padding: 30px;
  background-color: white;
  z-index: 3;
`;
```

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