React Select Enhanced Counter

A React Select package with 'Select All' feature and a counter for displaying the number of selected items beyond a specified limit.

Installation

Install the package using npm:

npm install react-select-enhanced-counter

Install the package using yarn:

yarn add react-select-enhanced-counter

Live Example

You can see a live example of this package in action on the React Select Enhanced Counter Live Example.

Usage

Single Select Example

<Select
  options= {[
    { value: '1', key: 'Chocolate' },
    { value: '2', key: 'Strawberry' },
    { value: '3', key: 'Vanilla' },
    { value: '4', key: 'Banana' },
    { value: '5', key: 'Lemon' },
    { value: '6', key: 'Potato' },
  ]}
  defaultValue= {{ value: '1', key: 'Chocolate' }}
  displayExpr= {'key'}
  valueExpr= {'value'}
  isClearable= {true}
  noOptionsMessage= {'No options'}
  placeholder= {'Single Select'}
/>

Multi Select Example

<Select
  options= {[
    { value: '1', key: 'Chocolate' },
    { value: '2', key: 'Strawberry' },
    { value: '3', key: 'Vanilla' },
    { value: '4', key: 'Banana' },
    { value: '5', key: 'Lemon' },
    { value: '6', key: 'Potato' },
  ]}
  defaultValue= {[
    { value: '4', key: 'Banana' },
    { value: '5', key: 'Lemon' },
    { value: '6', key: 'Potato' },
  ]}
  displayExpr= {'key'}
  valueExpr= {'value'} 
  isMulti={ true}
  isClearable= {true}
  allowSelectAll= {true}
  numberDisplayed={2}
  placeholder= {'Multi Select'}
  selectAllText= {'Select All'}
  noOptionsMessage= {'No options'}
/>

Props

• options* (Array): Array of possible options.
• displayExpr* (string): Required if supplying an array of objects as options. Used to identify which property on the object is the label.
• valueExpr* (string): Required if supplying an array of objects as options. Used to identify which property on the object is the value.
• placeholder (string): Default message when no items are selected.
• isMulti (boolean): Set to true for a multiselect, defaults to false.
• className (string): Add custom class.
• isDisabled (boolean): Is the select disabled.
• onChangeSelect (event:any) => void: Called whenever selected value(s) have changed.
• defaultValue (Array): It selects values by default.
• isSearchable (boolean): If set to true, will add an input at the top of the dropdown for filtering the results.
• allowSelectAll (boolean): If set to true, will add a Select All checkbox at the top of the list.
• maxMenuHeight (number): The height of the dropdown. Defaults to 400px.
• allSelectedPlaceholder (string): Default "%s selected" where %s is the number of items selected. This gets used when all options are selected.
• selectAllText (string): Default "Select all", use this to override "Select all" text from top of dropdown when included with includeSelectAll.
• numberDisplayed (number): The number of selected options displayed until it turns into '(selected count) selected'. Defaults to 4.
• customStyles (StylesConfig<any, boolean, any>): Style modifier methods.
• isLoading (boolean): Is the select in a state of loading (async).
• isClearable (boolean): Is the select value clearable.
• name (string): Name of the HTML Input (optional - without this, no input will be rendered).
• noOptionsMessage (string): Text to display when there are no options to list.

Contributing

If you want to contribute to this project, feel free to open an issue or submit a pull request.

License

MIT