react-combo-box
react-combo-box is a select control component which helps to Narrow down your results by selecting one or more options provided.
Installation
Install react-combo-box with npm
npm install @imsuresh206/testing
Usage/Examples
Simple Example
import React from 'react';
import { ComboBox } from '@imsuresh206/testing';
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 '@imsuresh206/testing';
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>
);
}
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
Demo
https://6480578bad52defd0eefe6ae-atroopthpc.chromatic.com/?path=/story/combo-box--simple
Codesandbox
https://codesandbox.io/s/sparkling-breeze-4czv7l
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.
Authors
- @imsuresh206
Feedback
If you have any feedback, please reach out to us at suresh@softsuave.com
License
MIT License
Copyright (c) 2023 Suresh-SS