Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
cpr-multiselect
Advanced tools
React component for selecting multiple entities from a drop-down
Canopy React Multi-select Component
npm install --save cpr-multiselect
src/multi-selector.css
dist/external-styles.css
items
: Items to choose frommaxSearchItems
: Limit the number of items rendered in the dialoginitialSelectedItems
: The selected itemsonChange
: Called when selected items changeonInputChange
: Called when the text input changesItemComponent
: Custom component for each item in the dialoggetItemTitle
: Called to display the title of each itemplaceholder
: Placeholder for the text inputpillPlaceholder
: Placeholder text for the empty pill boxmaxLength
: Maximum length for the text inputnoRestrict
: 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 elementhasError
: pass in true to display an orange error border around the input divvalidate
: function to validate the input. Return true or false.invalidMsg
: message to display when input is invalidateddoneButton
: add a done button to the dialog when entering inputcolor
: 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 defaultCustomPill
: custom component that replaces the default pill itemonBlur
: called when dialog is closedshowSearch
: 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 nothingimport 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>
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>
FAQs
React component for selecting multiple entities from a drop-down
We found that cpr-multiselect demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 13 open source maintainers collaborating on the project.
Did you know?
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.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.