@licuido-ui/ui_select NPM

Selectbox

The Select component is implemented as a custom input element of the InputBase. It extends the text field components sub-components, either the OutlinedInput, Input, or FilledInput, depending on the variant selected. It shares the same styles and many of the same props

Author

@author G Balaji balaji.g@crayond.co

Link

Story Book Link Selectbox

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_select

Import component

import { Select } from '@licuido-ui/ui_select';

Usage

<Select
  componentStylePropSx={{}}
  selectType='default'
  customProps={{
    rootStyleSx: {
      background: '',
    },
    inputRootStyleSx: {
      '& div': {
        background: '',
        color: '',
      },
    },
    selectParentSx: {},
    limitTags: 3,
    multiple: true,
    value: selectedOptions,
    isClearIcon: true,
    onClearTag: () => {
      setSelectedOptions([]);
    },
    islabel: true,
    label: 'select',
    handleChange: handleSelectChange,
    options: [
      { label: 'Option 1', value: 1994 },
      { label: 'Option 2', value: 1972 },
      { label: 'Option 3', value: 1974 },
      { label: 'Option 4', value: 2008 },
      { label: 'Option 5', value: 1957 },
      { label: 'Option 6', value: 1993 },
      { label: 'Option 7', value: 1994 },
    ],
    selectId: 'select',
    dropdownMinHeight: '200px',
    dropdownMaxWidth: '',
    dropdownMinWidth: '',
    dropdownMaxHeight: '',
    inputMinHeight: '',
    inputMaxWidth: '',
    inputMinWidth: '',
    inputMaxHeight: '',
    inputBackgroundColor: 'red',
    inputBorder: '1px solid blue',
    inputBorderRadius: '8px',
    inputPropsSx: {},
    inputStartEndornment: <SearchIcon width={'18px'} color='red' />,
    labelPropsSx: {},
    inputEndEndornment: <ArrowDown width={'18px'} color='red' />,
    checkedIconProp: null,
    unCheckedIconProp: null,
    hoverBgColor: '',
    hoverColor: 'blue',
    background: '',
    borderRadiusChip: '3px',
    inputColor: 'black',
    groupHeadColor: 'grey',
    listItemfontSize: '',
  }}
/>

Image

alt text

Sample Code

import {  Select } from '@licuido-ui/react';
import { useState } from 'react';
import ArrowDown from './assets/arrowDown';
import SearchIcon from './assets/searchIcon';
import GlobeSvg from './assets/globleSvg';

function App() {

   // Selected options state
  const [selectedOptions, setSelectedOptions] = useState<any[]>([]);

  function removeDuplicates(arr: any[]): any[] {
    const objectCounts = new Map();
    arr.forEach((item) => {
      const serializedItem = JSON.stringify(item);
      const count = objectCounts.get(serializedItem) || 0;
      objectCounts.set(serializedItem, count + 1);
    });

    return arr.filter((item) => {
      const serializedItem = JSON.stringify(item);
      const count = objectCounts.get(serializedItem);
      return count === 1;
    });
  }

  // Update the selected options when the user makes a selection
  const handleSelectChange = (event: any, newValue: any) => {
    const deduplicatedArray = removeDuplicates(newValue);
    console.log(deduplicatedArray, 'kkkkkkkk');
    setSelectedOptions(deduplicatedArray);
  };

  return (
    <ThemeProvider theme={muiTheme}>
      <Select
        componentStylePropSx={{}}
        selectType='chip'
        customProps={{
          rootStyleSx: {
            background: '',
          },
          inputRootStyleSx: {
            '& div': {
              background: '',
              color: '',
            },
          },
          selectParentSx: {},
          limitTags: 3,
          multiple: true,
          value: selectedOptions,
          isClearIcon: true,
          onClearTag: () => {
            setSelectedOptions([]);
          },
          islabel: true,
          label: 'select',
          handleChange: handleSelectChange,
          options: [
            { label: 'Option 1', value: 1994 },
            { label: 'Option 2', value: 1972 },
            { label: 'Option 3', value: 1974 },
            { label: 'Option 4', value: 2008 },
            { label: 'Option 5', value: 1957 },
            { label: 'Option 6', value: 1993 },
            { label: 'Option 7', value: 1994 },
          ],,
          selectId: 'select',
          dropdownMinHeight: '200px',
          dropdownMaxWidth: '',
          dropdownMinWidth: '',
          dropdownMaxHeight: '',
          inputMinHeight: '',
          inputMaxWidth: '',
          inputMinWidth: '',
          inputMaxHeight: '',
          inputBackgroundColor: 'red',
          inputBorder: '1px solid blue',
          inputBorderRadius: '8px',
          inputPropsSx: {},
          inputStartEndornment: <SearchIcon width={'18px'} color='red' />,
          labelPropsSx: {},
          inputEndEndornment: <ArrowDown width={'18px'} color='red' />,
          checkedIconProp: null,
          unCheckedIconProp: null,
          hoverBgColor: '',
          hoverColor: 'blue',
          background: '',
          borderRadiusChip: '3px',
          inputColor: 'black',
          groupHeadColor: 'grey',
          listItemfontSize: '',
        }}
      />
  );
}
export default App;

Props

Prop	Type	Default Value	Description
`componentStylePropSx`	Object	{}	Custom styling for the component.
`selectType`	String	'default'	Type of select component.
`customProps`	Object	{}	customProps containing various custom properties:

customProps contain these props ,

Prop	Type	Default Value	Description
`rootStyleSx`	`Object`	{ background: '' }	Custom styling for the root element.
`inputRootStyleSx`	`Object`	{ '& div': { background: '', color: '' } }	Custom styling for the input root element, including nested elements.
`selectParentSx`	`Object`	{}	Custom styling for the select parent element.
`limitTags`	`Number`	3	Maximum number of tags to display.
`multiple`	`Boolean`	true	Allow multiple selections (true/false).
`value`	`Array`	[]	Selected options.
`isClearIcon`	`Boolean`	true	Show clear icon for tags (true/false).
`onClearTag`	`Function`	() => { setSelectedOptions([]); }	Callback function when clearing a tag.
`islabel`	`Boolean`	true	Show label (true/false).
`label`	`String`	'select'	Label text.
`handleChange`	`Function`	handleSelectChange	Callback function for handling select changes.
`options`	`Array`	See example	An array of option objects with label and value.
`selectId`	`String`	'select'	ID for the select element.
`dropdownMinHeight`	`String`	'200px'	Minimum height of the dropdown.
`dropdownMaxWidth`	`String`	''	Maximum width of the dropdown.
`dropdownMinWidth`	`String`	''	Minimum width of the dropdown.
`dropdownMaxHeight`	`String`	''	Maximum height of the dropdown.
`inputMinHeight`	`String`	''	Minimum height of the input element.
`inputMaxWidth`	`String`	''	Maximum width of the input element.
`inputMinWidth`	`String`	''	Minimum width of the input element.
`inputMaxHeight`	`String`	''	Maximum height of the input element.
`inputBackgroundColor`	`String`	'red'	Background color of the input element.
`inputBorder`	`String`	'1px solid blue'	Border style of the input element.
`inputBorderRadius`	`String`	'8px'	Border radius of the input element.
`inputPropsSx`	`Object`	{}	Custom styling for input props.
`inputStartEndornment`	`JSX Element`	`<SearchIcon width={'18px'} color='red' />`	Start adornment for the input.
`labelPropsSx`	`Object`	{}	Custom styling for label props.
`inputEndEndornment`	`JSX Element`	`<ArrowDown width={'18px'} color='red' />`	End adornment for the input.
`checkedIconProp`	`Any`	`null`	Custom icon for checked state.
`unCheckedIconProp`	`Any`	`null`	Custom icon for unchecked state.
`hoverBgColor`	`String`	''	Background color on hover.
`hoverColor`	`String`	'blue'	Text color on hover.
`background`	`String`	''	Background styling.
`borderRadiusChip`	`String`	'3px'	Border radius for chips.
`inputColor`	`String`	'black'	Text color of the input.
`groupHeadColor`	`String`	'grey'	Color of group headers.
`listItemfontSize`	`String`	''	Font size of list items.

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

2.0.1

8 months ago