cpr-multiselect
Canopy React Multi-select Component
Requirements
- React >=0.13.3
- Lodash methods without, contains, union, isNull
Installation
- Install through
npm install --save cpr-multiselect
- Load the required stylesheet
src/multi-selector.css
- Optional - if you want some default styling use the stylesheet:
dist/external-styles.css
Usage
Props
-
items
: Items to choose from -
maxSearchItems
: Limit the number of items rendered in the dialog -
initialSelectedItems
: The selected items -
onChange
: Called when selected items change -
onInputChange
: Called when the text input changes -
ItemComponent
: Custom component for each item in the dialog -
getItemTitle
: Called to display the title of each item -
placeholder
: Placeholder for the text input -
pillPlaceholder
: Placeholder text for the empty pill box -
maxLength
: Maximum length for the text input -
noRestrict
: Pass this if you don't want to restrict the input so users can enter custom values. Custom values will be appended toselectedItems
as strings. -
noResultsPhrase
: The phrase to show when there are no matching results, or whenitems
is empty. The default is "No items found." -
pressEnterToAddPhrase
: IfnoRestrict
is true, this phrase will be displayed when users enter custom values. The default is "Press Enter to add". -
customCSSClass
: A css class to be put on the cpr-multiselector element -
hasError
: pass in true to display an orange error border around the input div -
validate
: function to validate the input. Return true or false. -
invalidMsg
: message to display when input is invalidated -
doneButton
: add a done button to the dialog when entering input -
color
: Color for the pills. Supportsblue
andgreen
currently. -
closeOnSelect
: Close the dialog after selection. -
keepSearchTextOnSelect
: by default, search text is cleared on select. Pass this as true if you want the search text to remain on select. -
CustomPillboxComponent
: custom component that triggers the dialog opening rather than using the pill box default -
CustomPill
: custom component that replaces the default pill item -
onBlur
: called when dialog is closed -
showSearch
: defaults totrue
, allows you to control if the search bar is present. -
pillUniqueIdentifier
: Used as unique key for pills (needed only for custom pills that use internal state) default: 'id' -
disabled
: If true, canopy disabled input styling will be applied and clicking the input will do nothing
Basic
import MultiSelect from 'cpr-multiselect';
let items = [
{
"lastName": "Seward",
"firstName": "William"
},
{
"lastName": "Montgomery",
"firstName": "Blair"
},
{
"lastName": "Meriwether",
"firstName": "Lewis"
}
];
function itemsChanged(selectedItems) {
console.log(selectedItems);
}
function inputChange(input) {
//Input will be whatever current text is in the input
}
<MultiSelect items={items} onChange={itemsChanged} onInputChange={inputChange}></MultiSelect>
Custom Components
import MultiSelect from 'cpr-multiselect';
let items = [
{
"lastName": "Seward",
"firstName": "William"
},
{
"lastName": "Montgomery",
"firstName": "Blair"
},
{
"lastName": "Meriwether",
"firstName": "Lewis"
}
];
/**
* Each item has a title which can be manipulated with a callback function
*/
function getCustomTitle(item) {
return item.firstName;
}
/**
* Each item rendered in the dialog can have a custom component
*/
let PersonComponent = React.createClass({
render () {
const firstName = this.props.item.firstName;
const lastName = this.props.item.lastName;
return (
<div>
<div>{`${firstName[0]}${lastName[0]}`}</div>
<div className="cpr-multi-selector-item__title">{`${firstName} ${lastName}`}</div>
</div>
)
}
});
<MultiSelect items={items} onChange={itemsChanged} getItemTitle={getCustomTitle} ItemComponent={PersonComponent}></MultiSelect>