@hudoro/input-dropdown
v0.0.3
Published
input dropdown component for Hudoro UI
Downloads
1,239
Readme
Hudoro Input Dropdown
Hudoro Input Dropdown is a strict and customizable Input Dropdown component for web development projects, designed for simplicity and adherence to strict design guidelines.
Package instalation
Instal package using pnpm
pnpm add @hudoro/input-dropdown
Instal package using yarn
yarn add @hudoro/input-dropdown
Instal package using npm
npm i @hudoro/input-dropdown
Usage/Examples (you can combine using icon package hudoro)
import {
InputDropdown
} from '@hudoro/input-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"}}>
<InputDropdown
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
/>
</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 | "" | | 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 |