@styless-ui/react-use-modal

Zero Built-in Style React UI Library.

Usage no npm install needed!

<script type="module">
  import stylessUiReactUseModal from 'https://cdn.skypack.dev/@styless-ui/react-use-modal';
</script>

README

@styless-ui/react-use-modal

 

Zero Built-in Style React UI 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_ 🇯🇵