4

GitHub - alexanderkhivrych/use-modal-hook: 🚀 React hook for controlling modal co...

 1 year ago
source link: https://github.com/alexanderkhivrych/use-modal-hook
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client


use-modal-hook heart

React hook for controlling modal components

Install

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

Usage

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK