Skip to content

alexanderkhivrych/use-modal-hook

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](json5/json5@v1.0.1...v1.0.2)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
fb81c2a

Git stats

Files

Permalink
Failed to load latest commit information.


use-modal-hook ❀️



PRs welcome npm package npm downloads Maintenance

React hook for controlling modal components

Install

#With npm
npm install use-modal-hook --save 
#With yarn
yarn add use-modal-hook

Usage

Edit react use modal hook example

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 }) => (
    <Modal isOpen={isOpen} onRequestClose={onClose}>
      <h2>{title}</h2>
      <div>{description}</div>
      <button onClick={onClose}>{closeBtnLabel}</button>
    </Modal>
  )
);

const SomePage = memo(() => {
  const [showModal, hideModal] = useModal(MyModal, {
    title: "My Test Modal",
    description: "I Like React Hooks",
    closeBtnLabel: "Close"
  });

  return (
    <>
      <h1>Test Page</h1>
      <button onClick={showModal}>Show Modal</button>
    </>
  );
});

const App = () => (
  <ModalProvider>
    <SomePage />
  </ModalProvider>
);

useModal(<ModalComponent: Function|>, <modalProps: Object>, <onClose: Function>): [showModal: Function, hideModal: Function]

Param Type Description
ModalComponent Function It can be any react 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