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

@kenshooui/react-multi-select

Package Overview
Dependencies
Maintainers
1
Versions
82
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kenshooui/react-multi-select

React Multi Select

  • 1.0.29
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.3K
decreased by-34.71%
Maintainers
1
Weekly downloads
 
Created
Source

Multi select

Build Status npm version

Kenshoo multi select component

react-multi-select demo

Multi select is a straight forward component that helps a user select multiple items in a clear and filterable way.

Installation

Installation using npm:

 npm install @kenshooui/react-multi-select --save

Installation using Yarn:

 yarn add @kenshooui/react-multi-select

How to use

import React, { Component } from "react";
import MultiSelect from "@kenshooui/react-multi-select";

class Example extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      items: [
        { id: 0, label: "item 1" },
        { id: 2, label: "item 2" },
        { id: 3, label: "item 3" },
        { id: 4, label: "item 4" }
      ],
      selectedItems: []
    };
  }

  handleChange(selectedItems) {
    this.setState({ selectedItems });
  }
  render() {
    const { items, selectedItems } = this.state;
    return (
      <MultiSelect
        items={items}
        selectedItems={selectedItems}
        onChange={this.handleChange}
      />
    );
  }
}

Properties

NameTypeDefaultDescription
itemsList[]list of items .
selectedItemsArray[]selected list to start with (subgroup of items).
onChangefunction()=>{}callback for changed event
loadingbooleanfalsetoggle to show loading indication.
messagesObject{}custom messages. Please see below for the availabale messages
showSearch booleantruetoggle to show search option.
showSelectAllbooleantruetoggle to show select All option in list.
searchIconString'search'search items icon. Options are available here: https://material.io/icons
deleteIconString'close'selected items delete icon. Options are available here: https://material.io/icons
wrapperClassNameString''wrapper class name. Used for customizing the style
listHeightnumber320available items list height
selectedListHeightnumber361selected items list height
selectedListHeightnumber40list item height

Customization

Messages

You can use your own messages. Here is the default messages object :

 messages: {
    "source.search.placeholder": "Search...",
    "source.header.selectAll": "Select all",
    "source.noItems": "No items...",
    "destination.noItems": "No items...",
    "destination.header.clearAll": "Clear all",
    "destination.header.none": "None",
    "destination.header.selected": "Selected"
  }

How to Contribute

Setting up development environment
  1. Fork the repository and create your branch from master.
  2. To install the project: yarn install
  3. Running tests: yarn test or yarn test:watch
  4. Running dev environment to work on yarn storybook and head to https://localhost:6006
Issuing a change
  1. Push to github.

  2. If you’ve fixed a bug or added code that should be tested, add tests.

  3. Open a Pull Request with the following guidelines:

    • Set title prefix to feature/bug and supply a descriptive PR title.
    • Add description to your Pull Request describing your change.
  4. Once your Pull Request is issued the test suite and build processes will run and we will review your change.

Compatibility

  • React 16 or newer

FAQs

Package last updated on 22 Mar 2018

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