react-combo-select

React dropdown for select and multiselect


Usability

react-combo-select requires react and react-dom as peer dependency. All versions should be supported, but make sure you are using matching versions of the two packages.

``javascript
import ComboSelect from 'react-combo-select';
`

and include css files with styles (you may include this in different way)

`javascript
require('../node_modules/react-combo-select/style.css');
`

As of version 1.2, font-awesome is no longer required, but may be optionally used instead of built-in SVG icons. Check the "custom icons" section below for more details.

props/options

$3

Actual data you want to show, this is an array of either object, strings or numbers. Array or array won't work

`javascript
let standardArray = ['JA007D', 'JA008D', 'JA009D', 'JA010D'];

;
`

$3

Text will be displayed as something you have selected or set as a start value, for this example it's "-Select me-".
If you dont provide defaultText or text prop, value by default is 'Select'. text have greater specificity than defaultText

`javascript
let standardArray = ['JA007D', 'JA008D', 'JA009D', 'JA010D'];

;
`

`javascript
let arrayWithObjects = [
{ text: 'air-JA007D', win: 'win-JA007D', value: 'JA007D' },
{ text: 'air-JA008D', win: 'win-JA008D', value: 'JA008D' },
{ text: 'air-JA009D', win: 'win-JA009D', value: 'JA009D' },
{ text: 'air-JA107D', win: 'win-JA107D', value: 'JA010D' },
];

;
`

$3

Select or multiselect, self explanatory

`javascript
let standardArray = ["JA007D", "JA008D", "JA009D", "JA010D", "JA219J", "JA302J", "JA306J", "JA308J", "JA309J", "JA311J", "JA313J", "JA314J", "JA316J", "JA318J", "JA319J", "JA322J", "JA324J", "JA325J", "JA326J"];

// Pick one


// Or just


// Pick multiple

`

$3

Function to be called when an option is selected. It will receive value and display text of the selected item, in that order, as arguments.

`javascript
fakeFunction(value, text) {
console.log(value, text);
}

let standardArray = ["JA007D", "JA008D", "JA009D", "JA010D"];


`

$3

Function to be called when the dropdown menu is opened or closed. It will receive open/closed state as boolean, value and display text of the selected item, in that order, as arguments.

`javascript
fakeToggle(open, value, text) {
console.log(open, value, text);
}

let standardArray = ["JA007D", "JA008D", "JA009D", "JA010D"];


`

$3

Whether to render a filter field at the top of the dropdown. Allowed values: On, off (default), smart (search will be shown only if there is more items then can be shown in window)

`javascript
let standardArray = ["JA007D", "JA008D", "JA009D", "JA010D", "JA219J", "JA302J", "JA306J", "JA308J", "JA309J", "JA311J", "JA313J", "JA314J", "JA316J", "JA318J", "JA319J", "JA322J", "JA324J", "JA325J", "JA326J"];


`

$3

If you want to display data from objects, use map! You need to define object with properties text and value. Text will be the one you display as a text, and value is returning in a onChange function as the first argument. If you want to return the whole object, put value=true (boolean). Default is map={{text: 'text', value: 'value'}}, which means you will have collection of objects, and on select value will be returned and text will be shown in select.

`javascript
let arrayWithObjects = [
{text: "air-JA007D", win: "win-JA007D", value: "JA007D"},
{text: "air-JA008D", win: "win-JA008D", value: "JA008D"},
{text: "air-JA009D", win: "win-JA009D", value: "JA009D"},
{text: "air-JA107D", win: "win-JA107D", value: "JA010D"}
];

// Key object
fakeFunction(value, text) {
console.log(value, text) // this will display key object win and key object with text will be shown in tn select.
}

// Whole object
fakeFunctionObject(value, text) {
console.log(value, text) // this will display {text: "air-JA007D", win: "win-JA007D", value: "JA007D"} and key object with text will be shown in tn select.
}


// Map through function, you allways get item, and have to return value
selectText: function(item){
return item.hereIs.objectFor.text
}

// function
fakeFunctionObject(value, text) {
console.log(value, text) // this will display {text: "air-JA007D", win: "win-JA007D", value: "JA007D"} and key object with text will be shown in tn select.
}


`

$3

You can sort as data, numbers, alphanumercial (alphanum) or not sort at all. By default, it will sort as strings, but only if the parameters in value are strings.

`javascript
// Proper sorting
let nummericArray = [3, 1, 11, 111, 21, 32, 14, 32, 442];
;
let standardArray = ['DDD', 'CCC', 'BBB', 'AAA'];
;
let standardArray = ['win-JA007D', 'win-JA0008D', 'win-JA009D'];
;
`

$3

Can be default, custom or off. For custom just put class that you want, and it would be assigned to the i DOM element. For default, just leave as is. false or off will render no icons.

`javascript
let standardArray = ["JA007D", "JA008D", "JA009D", "JA010D"];




`

$3

Self explanatory

`javascript
let standardArray = ["JA007D", "JA008D", "JA009D", "JA010D"];


`

$3

scrollHeight lets you choose height of the scrollable options area. Similarily, scrollMaxHeight will set max-height.
Both of those props require preferredDirection prop, which allows you to choose the direction in which the dropdown opens.

`javascript
const heightProps = {
    scrollHeight: 200, // number
    preferredDirection: 'down' // 'top' | 'down'
};

const maxHeightProps = {
    scrollMaxHeight: 100, // number
    preferredDirection: 'top' // 'top' | 'down'
};


`

$3

Added dataAttr prop used to pass html5 data attributes to DOM elements. The value of the prop should be an object mapping some or all of the 3 supported elements to data attributes that should be added to them. Each data attribute is specified as string which will be appended to 'data-' to form the attribute name.

Each property can be a string or a transform function.

For each dataAttr property of type function only one argument is forwarded to that function:

- wrapper: Component.props
- dropDownHeader: Component.props
- listItem: Component.props.data[index]

`javascript
dataAttr={{
wrapper: {
automation: 'ComboSelect'
},
dropDownHeader: {
automation: 'ComboSelectHeader'
},
listItem: {
automation: item => item && 'ComboSelectItem_' + item.text
}
}}
`

$3

Out of the box ComboSelect is using custom SVG icons that can be overriden by specifing new classes for i elements using props: icon, iconSelectActive, iconSelectInactive.

`javascript

`

$3

Resets values in currently selected ComboSelect instance. You have an example og how to set it up in DemoComponent.jsx.

$3

Groups can be enabled by adding groups prop to the ComboSelect. They will work both in single select and in multiselect mode.

> NOTE: For now, groups are only working with 'string' and 'number' sorting.

`javascript

`

Groups have to be passed down to component in specific format so that it can render properly. Initial data should look like this:

`js
{
// Mandatory group name
groupName: 'Other',
// and array of options
options: [
{
text: 'Option 1 Text',
value: 'Option 1 Value',
},
{
text: 'Option 2 Text',
value: 'Option 2 Value',
},
],
},
``

Data will be further transformed so that it can be rendered once passed down to ComboSelect. Groups support numeric and string sorts and search/filter functionality.