https://github.com/alexanderkhivrych/use-modal-hook

🚀 React hook for controlling modal components
https://github.com/alexanderkhivrych/use-modal-hook

hook hooks modal modals react react-hooks react-modal react-modal-hook reactjs use-modal-hook usemodal webpack

Last synced: about 1 year ago
JSON representation

🚀 React hook for controlling modal components

• Host: GitHub
• URL: https://github.com/alexanderkhivrych/use-modal-hook
• Owner: alexanderkhivrych
• License: mit
• Created: 2019-04-07T20:04:00.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2025-02-23T21:27:54.000Z (over 1 year ago)
• Last Synced: 2025-04-03T19:47:36.738Z (about 1 year ago)
• Topics: hook, hooks, modal, modals, react, react-hooks, react-modal, react-modal-hook, reactjs, use-modal-hook, usemodal, webpack
• Language: JavaScript
• Homepage: https://codesandbox.io/s/2zz9w1pwrr
• Size: 991 KB
• Stars: 67
• Watchers: 2
• Forks: 3
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

          


  


    


      use-modal-hook ❤️

    


  

    

    


    


    

      

    

    

      

    

    

      

    

    

      

    

  



> React hook for controlling modal components

## Install

```bash

#With npm

npm install use-modal-hook --save 

```

```bash

#With yarn

yarn add use-modal-hook

```

## Usage

[![Edit react use modal hook example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2zz9w1pwrr?fontsize=14)

```jsx

import React, { memo } from "react";

import { useModal, ModalProvider } from "use-modal-hook";

import Modal from "react-modal"; // It can be any modal

const MyModal = memo(

  ({ isOpen, onClose, title, description, closeBtnLabel }) => (

    

      
{title}

      
{description}

      {closeBtnLabel}

    

  )

);


const SomePage = memo(() => {

  const [showModal, hideModal] = useModal(MyModal, {

    title: "My Test Modal",

    description: "I Like React Hooks",

    closeBtnLabel: "Close"

  });

  return (

    <>

      
Test Page

      Show Modal

    >

  );

});


const App = () => (

  

    

  

);

```

#### `useModal(, , ): [showModal: Function, hideModal: Function]`

Param | Type  | Description

--- | --- | ---

ModalComponent | `Function` | It can be any [`react`](https://reactjs.org/docs/react-api.html) component that you want to use for show modal

modalProps | `Object` | Props that you want to pass to your modal component

showModal | `Function` | It is function for show your modal, you can pass any dynamic props to this function

hideModal | `Function` | It is function for hide your modal, you can pass any dynamic props to this function

onClose | `Function` | It callback will be triggered after modal window closes

#### `showModal(dynamicModalProps: Object)`

Param | Type  | Description

--- | --- | ---

dynamicModalProps | `Object` | Dynamic props that you want to pass to your modal component

## License

MIT © [alexanderkhivrych](https://github.com/alexanderkhivrych)