# tchiki-modal-react

> customisable react modal

Latest version **5.0.5** (published 2023-08-22) · ISC license · 0 weekly downloads

## Install

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

## 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 | 5.0.5 |
| Published | 2023-08-22 |
| First published | 2023-06-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | 18.17.1 |
| Dependencies | 3 |
| Unpacked size | 16.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | S-Syrichko |
| Maintainers | tchiki |
| Keywords | react, reactjs, dialog, modal |

## Links

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

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [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

- 5.0.5 (latest) — 2023-08-22
- 5.0.4 — 2023-07-04
- 5.0.3 — 2023-06-27
- 5.0.2 — 2023-06-27
- 5.0.1 — 2023-06-26
- 5.0.0 — 2023-06-26
- 4.0.2 — 2023-06-26
- 4.0.1 — 2023-06-26
- 4.0.0 — 2023-06-26
- 3.1.0 — 2023-06-26
- 3.0.1 — 2023-06-26
- 3.0.0 — 2023-06-26
- 2.0.2 — 2023-06-26
- 2.0.1 — 2023-06-26
- 2.0.0 — 2023-06-26
- … 1 more at https://npm.io/package/tchiki-modal-react/versions

## README

# tchiki-modal-react

## Description

Just another modal plugin for React. Supports ARIA attributes and is customisable by inline CSS styles.

## Table of Contents

* [Installation](#installation)
* [Properties](#properties)
* [Example](#example)

## Installation

Node version: [v18.17.1](https://nodejs.org/fr/download)

To install, you can use [npm](https://npmjs.org/) :


    $ npm install tchiki-modal-react
    

## Properties

Here is a full list of properties accepted by the plugin : 


| Prop          | Type                  | Description                                                      | Default Value                                                  |
| ------------- | --------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------- |
| isOpen        | boolean               | Indicates whether the modal is open or closed.                    | -                                                              |
| onClose       | () => void            | Function called when the modal is closed.                         | -                                                              |
| closeButton  | React.ReactNode       | Custom React node for the modal's close button.                   | X                                                             |
| style         | object                | Object containing custom styles for the modal.                    | -|
| style.backdrop| React.CSSProperties   | Custom styles for the modal backdrop.                             | `{ position: "fixed", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: "rgba(0, 0, 0, 0.5)", zIndex: 9998 }` |
| style.modal   | React.CSSProperties   | Custom styles for the modal itself.                               | `{ position: "relative", color: "#000", backgroundColor: "#fff", padding: "20px", borderRadius: "8px", zIndex: 9999 }` |
| style.close   | React.CSSProperties   | Custom styles for the modal's close button.                       | `{ position: "absolute", top: "10px", right: "10px", cursor: "pointer" }` |

## Example

Here is a simple example of tchiki-modal-react being used in an app with some custom
styles and focusable input elements within the modal content:

```jsx
import { useState } from "react";
import { Modal } from "tchiki-modal-react";

const customStyles = {
  backdrop: {
    backgroundColor: "rgba(0, 0, 0, 0.8)",
  },
  modal: {
    backgroundColor: "rgb(207, 255, 229)",
    height: "500px",
  },
  close: {
    backgroundColor: "#3EB489",
    width: "100px",
  },
};

const closeContent = <span>Close</span>;

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpenModal = () => {
    setIsOpen(true);
  };

  const handleCloseModal = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpenModal}>Open Modal</button>

      <Modal
        isOpen={isOpen}
        onClose={handleCloseModal}
        closeButton={closeContent}
        style={customStyles}
      >
        <h1>It's a modal</h1>
        <p>An exemple of tchiki-modal-react.</p>
        <form
          style={{
            height: "300px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-around",
          }}
        >
          <input />
          <button>tab navigation</button>
          <button>stays</button>
          <button>inside</button>
          <button>the modal</button>
        </form>
      </Modal>
    </div>
  );
}

export default App;

```

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