# ts-simple-modal

> A simple modal component built with React and TypeScript

Latest version **0.1.5** (published 2023-06-30) · 0 weekly downloads

## Install

```sh
npm install ts-simple-modal
pnpm add ts-simple-modal
yarn add ts-simple-modal
bun add ts-simple-modal
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2023-06-30 |
| First published | 2023-06-09 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 4.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Justine Lo |
| Maintainers | justinelo |
| Keywords | react, typescript, modal, simple, component |

## Links

- npm: https://www.npmjs.com/package/ts-simple-modal
- npm.io page: https://npm.io/package/ts-simple-modal

## Dependencies (12)

- [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.34
- [@types/react](https://npm.io/package/@types/react.md) ^18.2.9
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.4
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.4.0
- [@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

- 0.1.5 (latest) — 2023-06-30
- 0.1.4 — 2023-06-09
- 0.1.3 — 2023-06-09
- 0.1.2 — 2023-06-09
- 0.1.1 — 2023-06-09
- 0.1.0 — 2023-06-09

## README

# ts-simple-modal

`ts-simple-modal` is a simple and customizable modal component for React applications, written in TypeScript.

## Prerequisites

Before getting started with this project, ensure that you have the following prerequisites installed:

- Node.js (version 18.x.x)

## Installation

To install `ts-simple-modal`, you can use npm or yarn:

```bash
npm install ts-simple-modal
```

or 

```bash
yarn add ts-simple-modal
```

## Usage

Here's a simple example of how to use the ts-simple-modal component:

```jsx
import React, { useState } from 'react';
import Modal from 'ts-simple-modal';

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Open Modal</button>

      <Modal
        show={showModal}
        onClose={() => setShowModal(false)}
      >
        <h1>Hello, world!</h1>
        <p>Welcome to my modal!</p>
      </Modal>
    </div>
  );
}

export default App;

```

## Props

ts-simple-modal accepts the following props:

    - show (boolean): Determines whether the modal is visible.
    - onClose (function): A function that will be called when the user attempts to close the modal.
    - children (ReactNode): The content to display inside the modal.

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