Hudoro Dropdown

Hudoro Dropdown is a strict and customizable Dropdown component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/dropdown

Instal package using yarn

  yarn add @hudoro/dropdown

Instal package using npm

  npm i @hudoro/dropdown

Usage/Examples (you can combine using icon package hudoro)

 import {
 Dropdown
} from '@hudoro/dropdown'



import React, {SVGProps} from "react";
import ReactDOM from "react-dom/client";

const CustomIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
  return (
    <svg
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <g id="Curved/Random">
        <path
          id="shape"
          d="M3.33333 13.3333C3.33333 13.3333 4.16666 12.5 6.66666 12.5C9.16666 12.5 10.8333 14.1667 13.3333 14.1667C15.8333 14.1667 16.6667 13.3333 16.6667 13.3333V3.33333C16.6667 3.33333 15.8333 4.16667 13.3333 4.16667C10.8333 4.16667 9.16666 2.5 6.66666 2.5C4.16666 2.5 3.33333 3.33333 3.33333 3.33333V17.5"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>
    </svg>
  );
};

const App = () => (
  <div>
    <h1>Component test</h1>
    <div style={{margin: "100px"}}>
      <Dropdown
        dropdownLists={[
          {
            icon: <CustomIcon color="gray" />,
            label: "testing 1",
            value: "testing 1",
          },
          {
            icon: <CustomIcon color="red" />,
            label: "testing 2",
            value: "testing 2",
          },
          {
            icon: <CustomIcon color="blue" />,
            label: "testing 3",
            value: "testing 3",
          },
        ]}
        onChange={(e) => {
          console.log("e", e);
        }}
        defaultValue={[
          {
            label: "testing 3",
            value: "testing 3",
          },
        ]}
        iconLeft={<CustomIcon />}
        multiSelect
        searchAble
        onSearch={(e) => console.log(e)}
      />
    </div>
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/menu

Props that you can pass to <Menu {...props}>

Prop Name	Type	Value	Default	required	description
onChange	function	(props: {label: string; value: string}[]) => void	required	true	""
onSearch	function	(props:string) => void		false	""
dropdownLists	array of objects	[{icon?:React.ReactElement,label: string,value: string}]	required	true	data list for handle change
defaultValue	array of objects	[label: string,value: string}]			default value
size	string	"sm" / "md" / "lg"	'md'	false	sizes for dropdown
multiSelect	boolean	true/false	false	false	multi select for dropdown
searchAble	boolean	true/false	false	false	search for dropdown
iconLeft	React.ReactElement	React.ReactElement		false	icon for dropdown
placeholder	string	string		false	placeholder for dropdown