Noisy Pneumatic Mnemonic

    @styless-ui/react-use-modal
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    @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

    • trapFocus: boolean | BodyScrollOptions

    • 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_ 🇯🇵

    Install

    npm i @styless-ui/react-use-modal

    DownloadsWeekly Downloads

    0

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    8.94 kB

    Total Files

    8

    Last publish

    Collaborators

    • yuki0410