@yana4961/react-multiselect

Multiselect react component with checkboxes

Install

npm install --save @yana4961/react-multiselect

Usage

import React, { useState } from 'react'

import MultiSelectReact from '@yana4961/react-multiselect'
import '@yana4961/react-multiselect/dist/index.css'

import arrowDown from './asserts/arrow.svg'
import checkMark from './asserts/checked.svg'

const App = () => {
  const [selectedIds, setSelectedIds] = useState([3]);   // ids marked resources

  // Event triggered after change marked options,
  // if checked options equal selectedResource,
  // no changes have occurred, the event will not be triggered
  const filterResource = (resultChecked) => {
    setSelectedIds(resultChecked);
    console.log('resultChecked', resultChecked);
  };

  // please, wrapped MultiSelectReact for set width
  return <div style={{ width: 300 }}>
    <MultiSelectReact
      fetchAllResources={() => console.log('Event triggered after changing options')}
      resources={[{ id: 1, name: 'First' }, { id: 2, name: 'Second' }, { id: 3, name: 'Third' }, { id: 4, name: 'fourth' }, { id: 5, name: 'fifth' }]}
      filterResource={filterResource}
      withCheckBox={false}
      id={'MultiSelectExample'}
      selectedResource={selectedIds}  // ids marked resources
      textChoose={'Make a choice'}   // string for empty mulltiselect choice
      arrowDown={arrowDown}      // this for set arrow for right side in input
      checkMark={checkMark}   // img for marked selected checkboxes options, X by default
      numShowPreview={3} // how many preview boxes show
      classes={['hoverBg', 'checkedBg', 'bgWithoutPadding', 'withoutShadow', 'withBorder', 'borderRadius3']}
      fields={{ uniqId: 'id', displayed: 'name' }}  // sets fields 'uniqId' as value option and 'displayed' as displayed value option from 'resources' objects
    />
  </div>
}

export default App

Examples

Example:

Example without classes with button reset:

<MultiSelectReact
      fetchAllResources={() => console.log('Event triggered after open/closing options')}
      resources={[{ id: 1, name: 'First' }, { id: 2, name: 'Second' }, { id: 3, name: 'Third' }, { id: 4, name: 'fourth' }, { id: 5, name: 'fifth' }]}
      filterResource={filterResource}
      withCheckBox
      textResetFilter={'All reset'}
      ...
      classes={['hoverBg', 'checkedBg', 'bgWithoutPadding']}
    />

Example with classes

<MultiSelectReact
      fetchAllResources={() => console.log('Event triggered after open/closing options')}
      resources={[{ id: 1, name: 'First' }, { id: 2, name: 'Second' }, { id: 3, name: 'Third' }, { id: 4, name: 'fourth' }, { id: 5, name: 'fifth' }]}
      filterResource={filterResource}
      withCheckBox
      ...
      classes={['hoverBg', 'checkedBg', 'bgWithoutPadding']}
    />

Example with classes and with withCheckBox=false:

<MultiSelectReact
      fetchAllResources={() => console.log('Event triggered after open/closing options')}
      resources={[{ id: 1, name: 'First' }, { id: 2, name: 'Second' }, { id: 3, name: 'Third' }, { id: 4, name: 'fourth' }, { id: 5, name: 'fifth' }]}
      filterResource={filterResource}
      withCheckBox={false}
      ...
      classes={['hoverBg', 'checkedBg', 'bgWithoutPadding']}
    />

Example without button 'delete all' with border radius, with border, without shadow on input

<MultiSelectReact
      fetchAllResources={() => console.log('Event triggered after changing options')}
      resources={[{ id: 1, name: 'First' }, { id: 2, name: 'Second' }, { id: 3, name: 'Third' }, { id: 4, name: 'fourth' }, { id: 5, name: 'fifth' }]}
      filterResource={filterResource}
      withCheckBox={false}
      id={'MultiSelectExample'}
      selectedResource={selectedIds}  // ids marked resources
      textChoose={'Make a choice'}   // string for empty mulltiselect choice
      /* textResetFilter={'All reset'} */
      arrowDown={arrowDown}      // this for set arrow for right side in input
      checkMark={checkMark}   // img for marked selected checkboxes options, X by default
      numShowPreview={3} // how many preview boxes show
      classes={['hoverBg', 'checkedBg', 'bgWithoutPadding', 'withoutShadow', 'withBorder', 'borderRadius3']}
      fields={{ uniqId: 'id', displayed: 'name' }}  // sets fields 'uniqId' as value option and 'displayed' as displayed value option from 'resources' objects
    />

Example with selectedWithDel props

<MultiSelectReact
      fetchAllResources={() => console.log('Event triggered after changing options')}
      resources={[{ id: 1, name: 'First' }, { id: 2, name: 'Second' }, { id: 3, name: 'Third' }, { id: 4, name: 'fourth' }, { id: 5, name: 'fifth' }]}
      filterResource={filterResource}
      withCheckBox={false}
      id={'MultiSelectExample'}
      selectedResource={selectedIds}  // ids marked resources
      textChoose={'Make a choice'}   // string for empty mulltiselect choice
      arrowDown={arrowDown}      // this for set arrow for right side in input
      checkMark={checkMark}   // img for marked selected checkboxes options, X by default
      numShowPreview={3} // how many preview boxes show
      classes={['hoverBg', 'checkedBg', 'bgWithoutPadding', 'borderRadius3']}
      fields={{ id: 'id', name: 'name' }}  // sets fields 'uniqId' as value option and 'displayed' as displayed value option from 'resources' objects
      selectedWithDel
    />

Props

New Props:

selectedWithDel: that set function for delete selected elements after click on this elements box-preview in input. When set props selectedWithDel was added css-style hover background-color under place for arrow drop-down.

fields : sets fields 'uniqId' as value option and 'displayed' as displayed value option from 'resources' objects.

API

| Prop | Type | Default | Description | Example | | :--- | :--- | :--- | :--- | :--- | | resources | array | [] | Options for select | [{ id: 1, name: 'First' }] | | filterResource | function | () => {} | function, first argument return array ids selected options, second argument return filtered resources | const filterResource = (resultIds, resultObjects) => console.log('result', resultIds, resultObjects) | | fetchAllResources | function | () => {} | function, triggered when mount and after changing options. Function for get options from backend api can be set here | const resources = []; const fetchAllResources = () => resources.length === 0 && getOptionsFromAPI() | | id | string | none | the id attribute specifies a unique id for an HTML element | id='multiselect_react_555' | | selectedResource | array<int> or array<String> | [] | sets the initial value selected options ids, if any | const selectedResource = [2] or const selectedResource = ['apple', 'watermelon'] | | arrowDown | string (url for jpeg, svg, png) | none (when no value is set when hovering over an area there is a round background color) | picture for customize arrow for toggle dropdown | import arrowDown from './asserts/arrow.svg' then set prop arrowDown={arrowDown} | | withCheckBox | bool | false | if value is true options has checkboxes to mark selected values options, by default, the mark of the selected values ​​is done by setting the background-color on them | then set prop withCheckBox=true | | checkMark | string (url for jpeg, svg, png) | X | if used prop withCheckBox sets a custom mark checked in checkbox | import checkMark from './asserts/checkMark.svg' then set prop checkMark={checkMark} | | numShowPreview | number | 3 | sets how many of the selected values ​​will display their title in the input | const numShowPreview = 5 | | selectedWithDel | bool | false | when setting a value in true, it is possible to delete the selected value options ​​by clicking on them | then set prop selectedWithDel=true | | classes | array<String> | [] | set one of css class 'marginInSettings', 'bgGrayUnder', 'allWidth', 'withoutShadow', 'withoutMargins', 'maxWidthStretch', 'paddingConnection', 'blueLabel', 'forSecretary', 'greyWithDiv', 'checkedBg', 'hoverBg', 'bgWithoutPadding', 'withBorder', 'withBorder', 'borderRadius3' | set prop classes={['hoverBg', 'checkedBg', 'bgWithoutPadding', 'borderRadius3']} | | textChoose | String | '' | Set text to input, when selected options is clear | 'Select...' | | textResetFilter | String | '' | Set text to button for clear all selected options. If this option == false, button not displayed | 'Delete all' | | delSelectedOption | bool | false | Flag, to remove the selected option from modal with options. Must be used with selectedWithDel | const delSelectedOption = true | | nodeEmptyOptions | node | undefined | Some node to display when options in the modal window are empty | const nodeEmptyOptions = <div style={{ display: 'flex', paddingTop: 12, alignItems: 'center', justifyContent: 'center' }}>Empty</div> |

License

MIT © [YanaLugina <[email protected]>](https://github.com/YanaLugina <[email protected]>)