https://github.com/junkwarrior87/use-modal

Wrapper hooks for handling modal dialogs in React
https://github.com/junkwarrior87/use-modal

dialog hooks hooks-async modal modal-dialog react react-hooks

Last synced: about 2 months ago
JSON representation

Wrapper hooks for handling modal dialogs in React

• Host: GitHub
• URL: https://github.com/junkwarrior87/use-modal
• Owner: junkwarrior87
• License: mit
• Created: 2023-02-19T08:58:48.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-07-14T09:10:00.000Z (almost 2 years ago)
• Last Synced: 2025-03-23T15:41:38.018Z (about 2 months ago)
• Topics: dialog, hooks, hooks-async, modal, modal-dialog, react, react-hooks
• Language: TypeScript
• Homepage:
• Size: 51.8 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-modal

Wrapper hooks for handling modal dialogs in React

## Install

```sh

npm i @goldfinger87/use-modal

```

## Usage

```tsx

import {Ref, useImperativeHandle} from 'react';

import {ModalHandle, useModal, useModalHandle} from '@goldfinger87/use-modal';

function Modal({handle}: { handle: Ref }) {

    const [ref, imp] = useModal();

    const {hide} = imp;

    useImperativeHandle(handle, () => imp, []);

    return 

         hide()}>hide

         hide('returnValue')}>hide w/ value

    ;

}

function App() {

    const modal = useModalHandle();

    return <>

        

         modal.current.show()}>show

         modal.current.showAsync('init').then(console.log)}>showAsync

    >;

}

```