Needful Program Management

    cpr-multiselect

    3.4.13 • Public • Published

    cpr-multiselect Build Status

    Canopy React Multi-select Component

    Requirements

    • React >=0.13.3
    • Lodash methods without, contains, union, isNull

    Installation

    1. Install through npm install --save cpr-multiselect
    2. Load the required stylesheet src/multi-selector.css
    3. 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 to selectedItems as strings.
    • noResultsPhrase: The phrase to show when there are no matching results, or when items is empty. The default is "No items found."
    • pressEnterToAddPhrase: If noRestrict 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. Supports blue and green 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 to true, 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>

    Demo

    http://canopytax.github.io/cpr-multiselect/

    Keywords

    none

    Install

    npm i cpr-multiselect

    DownloadsWeekly Downloads

    192

    Version

    3.4.13

    License

    MIT

    Unpacked Size

    230 kB

    Total Files

    13

    Last publish

    Collaborators

    • parkm
    • greenjeffreym
    • mmemory
    • ron.douglas
    • miracastillo
    • geoctrl
    • tannerrigby
    • rchilds
    • joeldenning
    • blittle
    • dnorth2
    • kentmclean
    • courtyen
    • neiloler