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

2.0.0 • Public • Published

@styless-ui/react-use-doropdown

 

Zero Built-in Style UI React Library.

 


 

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

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

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

    Weekly Downloads

    0

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    8.59 kB

    Total Files

    8

    Last publish

    Collaborators

    • yuki0410