Install

via npm

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

via yarn

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

Usage

// import
import { useDropdown } from "@styless-ui/react-use-doropdown";

// in the function component
const { Dropdown, isOpen, open, close, toggle } = useDropdown(initialIsOpen);

Options

• initialIsOpen: boolean

  • Optional
  • Defaults to false

Returns

• Dropdown: JSX.Element | null

  • Dropdown Component

• isOpen: boolean

  • Dropdown Open State

• open: () => void

  • A function to open the Dropdown.

• close: () => void

  • A function to close the Dropdown.

• toggle: () => void

  • A function to toggle the Dropdown.

Example

import clsx from "clsx";
import { useDropdown } from "@styless-ui/react-use-doropdown";

export const Component = () => {
  const { Dropdown, toggle, isOpen } = useDropdown();

  return (
    <section className="section">
      <h2 className="title">DropDown</h2>
      <div className={clsx(["dropdown", isOpen && "is-active"])}>
        <div className="dropdown-trigger">
          <button
            className="button"
            aria-haspopup="true"
            aria-controls="dropdown-menu"
            onClick={toggle}
          >
            <span>Dropdown button</span>
            <span className="icon is-small">
              <i className="fas fa-angle-down" aria-hidden="true"></i>
            </span>
          </button>
        </div>
        <Dropdown className="dropdown-menu" id="dropdown-menu" role="menu">
          <div className="dropdown-content">
            <a href="#" className="dropdown-item">
              Dropdown item
            </a>
            <a href="#" className="dropdown-item">
              Other dropdown item
            </a>
            <a href="#" className="dropdown-item is-active">
              Active dropdown item
            </a>
            <a href="#" className="dropdown-item">
              Other dropdown item
            </a>
            <hr className="dropdown-divider" />
            <a href="#" className="dropdown-item">
              With a divider
            </a>
          </div>
        </Dropdown>
      </div>
    </section>
  );
};

Licence

This project is licensed under MIT license.

Created and maintained by

@yuki0410_ 🇯🇵