Nostradamus Prophecy Machine
    Wondering what’s next for npm?Check out our public roadmap! »

    react-multiselect-listbox

    0.0.7 • Public • Published

    MultiSelectListBox

    Description

    A multiselect list box component for React.

    react-multiselect-listbox demo

    Examples

    Installation

    npm install react-multiselect-listbox --save

    Then, you can import react-multiselect-listbox in your app as follows:

    import MultiSelectListBox from 'react-multiselect-listbox'

    Usage

    <MultiSelectListBox
      overrideStrings={{
        search: 'Search...',
        selectAll: 'Add All',
        removeAll: 'Remove All',
        selectedInfo: 'Items selected'
      }}
      options={[
        { desc: 'item 1', value: 1 },
        { desc: 'item 2', value: 2 }
      ]}
      textField="desc"
      valueField="value"
      value={selectedTwo}
      rowHeight={25}
      onSelect={({ item }) => {}}
      onRemove={({ item }) => {}}
      onSelectAll={selectedItems => {}}
      onRemoveAll={() => setSelectedTwo([])}
      sortable={true}
      onSort={({ sortedList }) => {}}
    />

    I18n

    Custimize text messages by passing prop overrideStrings

     <MultiSelectListBox
            overrideStrings={{
              search: 'Search...',
              selectAll: 'Add All',
              removeAll: 'Remove All',
              selectedInfo: 'Items selected'
            }}
            ...

    Theming

    Override CSS Variables

    :root {
      --mslb-bg-color: #fff;
      --mslb-font-color: #000;
      --mslb-border-color: #e0e0e0;
      --mslb-btn-font-color: #fff;
      --mslb-btn-bg-add-color: #00bfa5;
      --mslb-btn-bg-remove-color: #ff5252;
      --mslb-item-hover-bg-color: #f5f5f5;
    }

    Credits

    License

    MIT Licensed.

    Install

    npm i react-multiselect-listbox

    DownloadsWeekly Downloads

    36

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    17 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar