https://github.com/micheld-dev/react-modal

React-modal is a simplest way to create dialog on your ReactJS site.
https://github.com/micheld-dev/react-modal

dialog modal react react-component react-component-library tailwindcss typescript

Last synced: 10 days ago
JSON representation

React-modal is a simplest way to create dialog on your ReactJS site.

• Host: GitHub
• URL: https://github.com/micheld-dev/react-modal
• Owner: MichelD-dev
• License: isc
• Created: 2023-02-18T18:01:29.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-10T12:34:03.000Z (almost 2 years ago)
• Last Synced: 2024-12-03T23:15:12.753Z (27 days ago)
• Topics: dialog, modal, react, react-component, react-component-library, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@midly/react-modal
• Size: 47.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# React-modal

[![npm package](https://img.shields.io/npm/v/@midly/react-modal)](https://www.npmjs.org/package/@midly/react-modal)

[![npm package](https://img.shields.io/bundlephobia/min/@midly/react-modal)](https://www.npmjs.org/package/@midly/react-modal)

[![npm package](https://img.shields.io/github/last-commit/micheld-dev/react-modal)](https://www.npmjs.org/package/@midly/react-modal)

[![npm package](https://img.shields.io/npm/dw/@midly/react-modal)](https://www.npmjs.org/package/@midly/react-modal)

React-modal is a simplest way to create dialog on your ReactJS site.

- Small (less than 45Kb)

- Mobile friendly

- Without dependencies

## Getting Started

Install this package:

```shell

npm i @midly/react-modal

```

Import the component (import modalRef type if TSX):

```jsx 

//component.tsx

import {Modal} from '@midly/react-modal';

import {ModalRef} from '@midly/react-modal/dist/esm/Modal'

const modalRef = useRef(null)

Your content

```

You can then render the Modal component like any other React component in JSX/TSX.

```jsx

//component.tsx

const showModal = useCallback(() => modalRef.current?.open(), [])

Open modal

```