@hudoro/multi-select
v0.0.1-beta.5
Published
multi select component for Hudoro UI
Downloads
801
Readme
Hudoro Multi Select
Hudoro Multi Select is a strict and customizable Multi Select component for web development projects, designed for simplicity and adherence to strict design guidelines.
Screenshots
Package instalation
Instal package using pnpm
pnpm add @hudoro/multi-select
Instal package using yarn
yarn add @hudoro/multi-select
Instal package using npm
npm i @hudoro/multi-select
Usage/Examples (you can combine using icon package hudoro)
import React from "react";
import {MultiSelect} from "@hudoro/multi-select";
import ReactDOM from "react-dom/client";
const App = () => (
<div>
<h1>Component test</h1>
<div style={{margin: "50px", width: "350px"}}>
<MultiSelect
sizes="md"
listSelect={[
{label: "Indonesia", value: "Indonesia"},
{label: "Malaysia", value: "Malaysia"},
{label: "Kamboja", value: "Kamboja"},
{label: "Thailand", value: "Thailand"},
{label: "Philipina", value: "Philipina"},
]}
onChange={(e) => console.log("e", e)}
/>
</div>
</div>
);
ReactDOM.createRoot(document.getElementById("app")!).render(<App />);
Props @hudoro/multi-select
Props that you can pass to <MultiSelect {...props} />
| Prop Name | Value | required | | :--------- | :------------------------------------------------ | :------- | | size | "sm" / "md" / "lg" | false | | listSelect | {label: string; value: string}[] | true | | onChange | (props: {label: string; value: string}[]) => void | true |