Dropdown

A menu that appears below a title when it is selected and remains until used or dismissed.

Preview

Usage

It uses the useDropdown hook for handling the logic.

npm i react-hartan

import { Dropdown } from "react-hartan"

function App() {

  return (
    <>
      <Dropdown></Dropdown>
    </>
  )
}

export default App

Customization With Props

• listItem -> This prop accepts an array of nodes, used as the dropdown list, to be sent by user.

• buttonText -> This prop accepts a value, used as the button name.

• onClickFunction -> The custom on click function passed by the user for handling click logic.

• id -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.

• userDropdownStyle -> The custom styling prop for the full dropdown.

• userDropdownListStyle -> The custom styling prop for the list container containing list items.

• userDropdownListItemStyle -> The custom styling prop for each list item inside the list container.

• userButtonStyle -> The custom styling for the button opening/closing dropdown.

Default

import { Dropdown } from "react-hartan"

function App() {

  return (
    <>
      <Dropdown></Dropdown>
    </>
  )
}

export default App

With Custom Props

Component Code

This is the code for Dropdown component.

Dropdown.jsx

import useDropdown from "../../Hooks/Dropdown"
import dropdownStyle from "./Dropdown.module.css"
import PropTypes from "prop-types"

const list = [
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4"
];

function onClickItem(val){
    console.log(val);
}

export default function Dropdown({ listItem = list, buttonText = "Dropdown", onClickFunction = onClickItem, id, userDropdownStyle, userDropdownListStyle, userDropdownListItemStyle, userButtonStyle }) {

    const [isOpen, setIsOpen, handleDropdownButtonClick, dropdownText] = useDropdown(buttonText, onClickFunction);

    return (
        <section className={`${dropdownStyle.dropdown} ${userDropdownStyle}`}>
            <button className={`${dropdownStyle.dropdownBtn} ${userButtonStyle}`} onClick={() => setIsOpen(!isOpen)}>{dropdownText}
                {
                    isOpen ? (
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z" /></svg>
                        </span>
                    ) :
                        (
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><path fill="#000000" d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" /></svg>
                            </span>
                        )
                }
            </button>
            <ul className={`${dropdownStyle.dropdownList} ${userDropdownListStyle}`}>
                {
                    isOpen && (
                        listItem.map((listText, id) => {
                            return <li className={`${dropdownStyle.dropdownListItem} ${userDropdownListItemStyle}`} key={id} onClick={handleDropdownButtonClick}><span>{listText}</span></li>
                        })
                    )
                }
            </ul>
        </section>
    )
}

Dropdown.propTypes = {
    listItem: PropTypes.arrayOf(PropTypes.node),
    buttonText: PropTypes.node,
    onClickFunction: PropTypes.func,
    id: PropTypes.string,
    userDropdownStyle: PropTypes.string,
    userButtonStyle: PropTypes.string,
    userDropdownList: PropTypes.string,
    userDropdownListItem: PropTypes.string
};

Dropdown.module.css