Skip to content

React Select Combobox is a flexible and customizable combobox component for React applications. It provides a user-friendly interface for selecting options from a dropdown list, with support for searching, and custom rendering of options.

Notifications You must be signed in to change notification settings

softsuave-tech-matrix/react-select-combobox

Repository files navigation

react-select-combobox

react-select-combobox is a select control component which helps in narrowing down your results by selecting one or more options provided.

Installation

Install react-select-combobox with npm

  npm install react-select-combobox

Usage/Examples

Simple Example

import React from 'react';
import { ComboBox } from 'react-select-combobox';

const dataProvider = [
  { label: 'Apple', value: 111 },
  { label: 'Pineapple', value: 112 },
  { label: 'Litchi', value: 113 },
  { label: 'Orange', value: 114 },
  { label: 'Banana', value: 115 },
];

export default function App() {
  const [selectedItems, setSelectedItems] = React.useState([]);

  return (
    <div>
      <ComboBox
        dataProvider={dataProvider}
        value={selectedItems}
        onComplete={(value) => {
          setSelectedItems(value);
        }}
      />
    </div>
  );
}

Select items by default

import React from 'react';
import { ComboBox } from 'react-select-combobox';

const dataProvider = [
  { label: 'Apple', value: 111 },
  { label: 'Pineapple', value: 112 },
  { label: 'Litchi', value: 113 },
  { label: 'Orange', value: 114 },
  { label: 'Banana', value: 115 },
];

export default function App() {
  const [selectedItems, setSelectedItems] = React.useState([
    { label: 'Apple', value: 111 },
    { label: 'Pineapple', value: 112 },
  ]);

  return (
    <div>
      <ComboBox
        dataProvider={dataProvider}
        value={selectedItems}
        onComplete={(value) => {
          setSelectedItems(value);
        }}
      />
    </div>
  );
}

Typescript Example

import React from "react";
import { ComboBox, ComboBoxOptionsType } from "react-select-combobox";

const dataProvider = [
  { label: "Apple", value: 111 },
  { label: "Pineapple", value: 112 },
  { label: "Litchi", value: 113 },
  { label: "Orange", value: 114 },
  { label: "Banana", value: 115 }
];

export default function App() {
  const [selectedItems, setSelectedItems] = React.useState<
    ComboBoxOptionsType[] | ComboBoxOptionsType
  >([]);

  return (
    <ComboBox
      dataProvider={dataProvider}
      value={selectedItems}
      onComplete={(value) => {
        setSelectedItems(value);
      }}
    />
  );
}

Demo

https://6480578bad52defd0eefe6ae-vbelaysmmu.chromatic.com/?path=/story/combo-box--simple

Props

Common props you may want to specify include:

  • cancelText - text which replaces CANCEL text
  • dataProvider - specify list of options for users to select
  • leftAdornment - icon which appears left side of the Filter box
  • onComplete - handler to get the selected items || [] on submit
  • placeHolder - text which replaces Select... text
  • primaryColor - color String which changes Button and Checkbox color
  • rightAdornment - icon which appears right side of the Filter box
  • selectAllText - text which replaces Select All text
  • submitText - text which replaces OK text
  • value - control the current value

Features

  • Customalizable
  • Cross browser supported
  • Light weighted
  • Search and Filter options

Contributing

Contributions are always welcome! For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Author

Feedback

If you have any feedback, please reach out to us at techmatrix@softsuave.com

About

React Select Combobox is a flexible and customizable combobox component for React applications. It provides a user-friendly interface for selecting options from a dropdown list, with support for searching, and custom rendering of options.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published