Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

cpr-multiselect

Package Overview
Dependencies
Maintainers
13
Versions
75
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cpr-multiselect

React component for selecting multiple entities from a drop-down

  • 3.4.13
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
13
Created
Source

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/

FAQs

Package last updated on 01 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc