@styless-ui/react-use-modal

@styless-ui/react-use-modal

 

Zero Built-in Style UI React Library.

 

---

 

Install

via npm

npm install @styless-ui/react-use-modal --save

via yarn

yarn add @styless-ui/react-use-modal

 

Usage

// import
import { useModal } from "@styless-ui/react-use-modal";

// in the function component
const {
  Modal,
  isOpen,
  open,
  close,
} = useModal(initialIsOpen?, {
  disableScroll,
  trapFocus,
  closeOnEsc
});

Options

• initialIsOpen: boolean

  • Optional
  • Defaults to false

• disableScroll: boolean | BodyScrollOptions

  • Optional
  • Defaults to true
  • See BodyScrollLock Options.

• trapFocus: boolean | BodyScrollOptions

  • Optional
  • Defaults to true
  • See FocusTrap Options.

• closeOnEsc: boolean

  • Optional
  • Defaults to true

Returns

• Modal: JSX.Element | null

  • Modal Component

• isOpen: boolean

  • Modal Open State

• open: () => void

  • A function to open the Modal.

• close: () => void

  • A function to close the Modal.

 

Example

import clsx from "clsx";
import { useModal } from "@styless-ui/react-use-modal";

export const Component = () => {
  const { Modal, open, close, isOpen } = useModal();

  const modalClassName = clsx(["modal", isOpen && "is-active"]);

  return (
    <>
      <button className="button" onClick={open}>
        open
      </button>
      <Modal className={modalClassName}>
        <div className="modal-background" onClick={close}></div>
        <div className="modal-card">
          <header className="modal-card-head">
            <p className="modal-card-title">Modal title</p>
            <button
              className="delete"
              aria-label="close"
              onClick={close}
            ></button>
          </header>
          <section className="modal-card-body">{/* Modal Content */}</section>
          <footer className="modal-card-foot">
            <button className="button is-success" onClick={close}>
              Save changes
            </button>
            <button className="button" onClick={close}>
              Cancel
            </button>
          </footer>
        </div>
      </Modal>
    </>
  );
};

 

Licence

This project is licensed under MIT license.

 

Created and maintained by

@yuki0410_ 🇯🇵