Package detail

@denyo/react-select

denyo9MIT3.0.5

A Select control built with and for ReactJS

combobox, form, input, multiselect, react, react-component, select, ui

React-Select

The Select control for React. Initially built for use in KeystoneJS.

See react-select.com for live demos and comprehensive docs.

See our upgrade guide for a breakdown on how to upgrade from v2 to v3.

React Select is funded by Thinkmill and Atlassian. It represents a whole new approach to developing powerful React.js components that just work out of the box, while being extremely customisable.

Features include:

Flexible approach to data, with customisable functions
Extensible styling API with emotion
Component Injection API for complete control over the UI behaviour
Controllable state props and modular architecture
Long-requested features like option groups, portal support, animation, and more

If you're interested in the background, watch Jed's talk on React Select at ReactNYC in March 2018.

See our upgrade guide for a breakdown on how to upgrade from v1 to v2.

The old docs and examples will continue to be available at v1.react-select.com.

Installation and usage

The easiest way to use react-select is to install it from npm and build it into your app with Webpack.

yarn add react-select

Then use it in your app:

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

class App extends React.Component {
  state = {
    selectedOption: null,
  };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
      />
    );
  }
}

Props

Common props you may want to specify include:

autoFocus - focus the control when it mounts
className - apply a className to the control
classNamePrefix - apply classNames to inner elements with the given prefix
isDisabled - disable the control
isMulti - allow the user to select multiple values
isSearchable - allow the user to search for matching options
name - generate an HTML input with this name, containing the current value
onChange - subscribe to change events
options - specify the options the user can select from
placeholder - change the text displayed when no option is selected
value - control the current value

See the props documentation for complete documentation on the props react-select supports.

Controllable Props

You can control the following props by providing values for them. If you don't, react-select will manage them for you.

value / onChange - specify the current value of the control
menuIsOpen / onMenuOpen / onMenuClose - control whether the menu is open
inputValue / onInputChange - control the value of the search input (changing this will update the available options)

If you don't provide these props, you can set the initial value of the state they control:

defaultValue - set the initial value of the control
defaultMenuIsOpen - set the initial open value of the menu
defaultInputValue - set the initial value of the search input

Methods

React-select exposes two public methods:

focus() - focus the control programatically
blur() - blur the control programatically

Customisation

Check the docs for more information on:

Thanks

Thank you to everyone who has contributed to this project. It's been a wild ride.

If you like React Select, you should follow me on twitter

Shout out to Joss Mackison, Charles Lee, Ben Conolly, Dave Brotherstone, Brian Vaughn, and the Atlassian Design System team ❤️

License

MIT Licensed. Copyright (c) Jed Watson 2019.

react-select

3.0.4

Patch Changes

cd8c3090 #3586 Thanks @mitchellhamilton! - Add base entrypoint back
#3569 Thanks @vadimka123 - Performance improvement: menu items are built when the menu opens, not in the constructor
#3326 Thanks @stevemao Fix for iOS focus management when clearing the select value
#3532 Thanks @alisonhall! - Change aria-live assertive to polite

3.0.3

Remove base entrypoint to fix rollup dependency resolution issue

3.0.2

fix erroneous build

3.0.1

[patch]:
- Add README.md file for npm

3.0.0

[major]9ad152b #3574 Thanks @gwyneplaine:
- Upgrade emotion dependency from 9.x to 10.x #3321
- Normalize Values #3416
- Separate entrypoints for Async, Creatable and makeAnimated #3541
- UMD builds deprecated
- required react peer-dependecy of 16.8

v2.4.4 / 2019-05-27

BugFixes

[#3540] Fixed active styles previously being applied to disabled options. Thanks @risenforces
[#3563] Fixed IME composition bugs in non Chrome browsers. Thanks @jwilander

v2.4.3 / 2019-03-17

Bugfixes

#3492 Add labels to fields to make inspection. @destructobeam
#3442 Ignore keydown events on Enter in IME. @sat0yu.
#3343 fix lint issues. @JoshMcCullough.
#3498 Fix async type. @mufasa71
#3436 Allow Node as placeholder @eemeli.

v2.4.2 / 2019-03-11

Bug fixes

#3446 Fix bug with select input value not being selectable. Thanks kangweichan.
#3445 Fix accessibility bug. Disabled options are now focusable and announced by screen-readers but not selectable. Thanks sarahbethfederman.

Updates

Fixed typo in style docs. Thanks thiagodebastos.
#3460 Added description for actionTypes to docs. Thanks mikekellyio

v2.4.1 / 2019-02-18

Bug fixes

#3432 Fix bug with select menu's not working on mobile.

v2.4.0 / 2019-02-15

Bug fixes

#3427 remove focusOption() invocation on ENTER press if the menu is not open.
#3402 fix menu scroll being reset on focus of a select with an open menu in ie11. See #3342 for details. Thanks timothypage
#3420 fixed select menu being opened on click, when openMenuOnClick is false. Thanks caleb and rscotten
#3419 fixed bug with ScrollCaptor operating on an undefined scrollTarget. Thanks iulian-radu-at
#3411 fix bug where Enter key press on select with a closed menu wouldn't propagate up. Resolves #2217.
#3407 remove unnecessary aria-roles from menu and options. This is now all handled by our aria-live implementation. Resolves #3355. Thanks sarahbethfederman.
#3393, fix aria live announcement text for removing a selected option. Thanks msharkeyiii.
#3350 Updated to 0.91 of flow. Updated types to pass stricter type checking, in later versions of flow. Thanks DragonWW

Updates

#3370 Updated memoize-one dependency to 5.0.0. Thanks adam187
#3366 Update build tooling, to leverage babel 7. Thanks DragonWW

v2.3.0 / 2019-01-18

Bug fixes

#3315 add RAF call to Collapse component getRef() such that getBoundingClientRect() is invoked consistently.
#3275 wrap String invocation around inputValue to avoid calling toLowerCase on invalid elements. thanks tavareshenrique
#3357, fix loadOptions call in Async select to always pass in a string for the inputValue.
#3346 Revert work done in CSP nonce PR #3260 to unblock react-select usage in an SSR setting. Users who need nonce support still, please pin your version of react-select at 2.2.0. Nonce support will be re-added in 3.0.0 along with an upgrade to emotion 10; which includes nonce support without having to provide a custom emotion instance.

Features

#3115 menu-is-open modifier added to control class when the menu is open. @s20lee

v2.2.0 / 2018-12-28

Bug Fixes

#3296 Fix for tab interactions when in composition mode with an IME. Thanks yshr446 for the PR.
#3302 Fix to breaking android and mobile safari touch bug #2755, by adding more conscientious checks to the onTouchStart and onTouchMove listeners. Thanks xakep139 for the PR.
#3303 Input and GroupHeading components now get passed the selectProps prop, thanks maxmarchuk for the PR.
#3260 As a result of the CSP nonce support feature, the emotion instance is now cached and passed down to all internal components, meaning that users looking to heavily customise their Select components can do so without externally importing emotion, and nonce instances are respected per select instance. Please see this segment in the docs for a more detailed explanation.
#3299 fix to assistive text on menu open.

Feature

#3260 Add CSP nonce support to Select, thanks Avaq and Andarist for the heavy lifting.

v2.1.2 / 2018-11-22

Bug fixes

[#3161] Initialize state with inputValue when defaultOptions is true in AsyncSelect, resolves #3160, thanks @cutterbl
[#3096] Placeholder component now also receives the isFocused state value as a prop. Thanks @Nelrohd
[#3060] Fix bug where trying to set the cursor somewhere in an input value would close the menu. Thanks @stijndeschuymer
[#3163] Fixed bug where isDisabled wasn't being reflected onto the DummyInput, which meant that disabled non searchable selects were still focusable. Thanks @gm0t
[#3216] Fixes bug where clearing with backspace in a single select would result in an empty array, as opposed to the expected empty object. Thanks @IanVS
[#3013] Fixes bug where the menu would close on trying to scroll using the scroll bar in IE11. Thanks @rakid

Misc

A big shoutout to everyone who helped contribute to the docs. In no particular order @acrawford13, @kirillku, @ajaymathur, @mgalgs, @cutterbl, @JonathanWbn, @mwood23, @stevemao, @jossmac, and anyone else I've missed.
Thanks to @IanVS for cleaning up our cypress tests.

v2.1.1 / 2018-10-24

Bug fixes

[#3132] Strip theme props from default Input and GroupHeading components, as they were polluting the DOM.
[#3131] Add support for the 'Delete' key in the internal onKeyDown method. Same functionality as 'Backspace'.
[#3100] Update flow-types and normalised default prop declarations in indicators. Thanks iseredov

Updates

[#3083] Added sideEffects property to package.json to support tree-shaking in webpack 4.x. Thanks SimenB.
[#3078] Update jest dependency to 23.6.0. Thanks papandreou
[#3065] Update babel-plugin-emotion to 9.2.10. Thanks mtzhang
[#3108] Update docs to include instructions for replicating the simple-value use case within react-select v2. Thanks elboletaire

v2.1.0 / 2018-10-03

[#2839] Added support for theming via theme prop. Thanks akx
[#2874] Fixed flow-types of MultiValue components. Thanks mike1808
[#2903] Fix missing form input when there isn't a selected value. Thanks alvinsj
[#2934] Reduced theme colors to a sane value set to make the exported theme more easy to consume and configure. Thanks jossmac
[#2876] Added overflow hidden to valueContainer to stop overflowing text in the control. Thanks mike1808
[#2975] Separated menu placement logic from menu primitive. Thanks jossmac.

v2.0.0 / 2018-07-23

async select now accepts a filterOptions function as a prop #2822
[BREAKING] react-select now exports react-select.esm.js from dist instead of react-select.es.js #2641
[BREAKING] innerRef assignments in custom components must now be made from the root of the prop object, as opposed to reaching into innerProps. This is part of the work to normalize the behaviour circa custom components. #2824
className and classNamePrefix deprecation warning and backward compatibility removed. className now only affects the select container, classNamePrefix prefixes all internal components. #2820
Added closeMenuOnScroll prop, which can either be a boolean or a function, if set to true the select menu will close on scroll of the document/body. If a function is supplied, it must take the following shape (event: ScrollEvent) => boolean, the boolean value will be used to resolve whether the menu should be closed or stay open. #2809, thanks Vynlar for this.
Added fix to support IME inputs. #2767, thanks shamabe
Removed primitives, and normalise multi-value components to be in line with existing component customisation patterns. #2821
Normalised isOptionDisabled to be inline with its sibling prop isOptionSelected. #2821 Thanks SimeonC
#2814 Added memoization to custom components within Select.js as well as in the exported makeAnimated factory method. Thanks to Alex Reardon's memoize-one
#2652, Async Select now re-evaluates defaultOptions on componentWillReceiveProps. Thanks jesstelford

v2.0.0-beta.7 / 2018-07-03

Removed old aria-attributes in Option, MenuList and other components in favor of an aria-live-region implementation. screenReaderStatus prop is still at the moment untouched, and aria-labelledby and aria-label props are still available and retain their functionality. See #2581.
Internal ref input is now inputRef for consistency.
Internal ref menuRef is now menuListRef for consistency.
Fixed bug with MultiValueRemove interaction not working in mobile #2762, thanks chuckbergeron.
Added makeAnimated function export, that takes passed in components and wraps them in higher order components that expose animated functionality. #2724
Added functionality to not render the menu if noOptionsMessage or loadingMessage are set to null. #2754
Fixed bug with mobile menu being blocked when menuShouldBlockScroll is true. #2756
Enabled hideSelectedOptions functionality for single-select as well. Changed logic so that if isMulti is true and hideSelectedOptions is not defined, we will hide selected options by default. Explicitly setting hideSelectedOptions will override this behaviour. https://github.com/JedWatson/react-select/pull/2753
Updates to flow types, thanks mike1808, himerus, teamable-software and
Bumped internal flow-bin dependency to 0.72.0, #2646 thanks lunij
Fixed #2701, use of un-polyfilled array.includes() in Select.js, this has now been subbed out for a IE compatible implementation.
#2733, fixed classname bug to do with prefixing classes with modifiers.
#2723, fixed emotion compilation bug blocking loadingDot rendering.
#2749 fixed typo in docs. thanks JuhQ
#2717 added selected value to onChange to accommodate multi-select, thanks SimeonC

v2.0.0-beta.6 / 2018-05-23

Fixed bug with css attribute being wrongly applied to a DOM element in SingleValue. Thanks guigs
Added removedValue to the actionMeta of the remove-value action that's passed into the onChange prop.
Reverted previous change of innerRef in innerProps of custom Components to ref. The property is now once again named innerRef. This is mostly to resolve issues with styled-components not passing ref down to wrapped dom elements, however this is also a safer pattern to apply as it requires users providing their own custom components to explicitly associate the passed down ref with the requisite dom element.
selectValue now filters items based on the getOptionValue method. Thanks (inv8der)[http://github.com/inv8der]
Added createOptionPosition to creatable select to allow users to specify where the createOption element appears in the menu.
Added touch handling logic to detect user intent to scroll the page when interacting with the select control.

v2.0.0-beta.5 / 2018-05-18

Added controlShouldRenderValue prop, defaults to true. Setting it to false disables rendering values in the control. ThanksJoss Mackison

v2.0.0-beta.4 / 2018-05-15

Fixed bug where transition props were being spread onto the DummyInput causing react warnings in the console. Thanks Mike Gardner

v2.0.0-beta.3 / 2018-05-14

Note: There is an important change in this release to the behaviour of className.

Previously, className would control the class names applied to internal components as well as the containing element. Now, the className prop only controls the class name of the containing element, and the new prop classNamePrefix controls classes applies to internal components.

Until 2.0.0 final is released, we have added backwards compatibility and a deprecation warning to cover this change.

Added classNamePrefix prop, which now controls the class names applied to internal components
Refactored cx internal implementation to reduce specificity of css-in-jss base styles.
maxValueHeight prop removed
Added --is-disabled className modifier to Option component, thanks eemeli
Fixed various IE11 issues, see #2583
Added multi-value keyboard navigation using left and right arrows.
Simplified flow distribution, thanks falconmick
Added fix to ensure focus is on the Input when the menu opens

v2.0.0-beta.2 / 2018-04-25

Switched from glam to emotion for css-in-js
Input colour can now be changed
Use of React 16 Fragment removed, 2.0.0 should work with React 15
SSR support improved
Indicator icons are now exported

v2.0.0-beta.1 / 2018-04-20

Added tabIndex prop
Added classNames prop
Added upgrade guide from v1 --> v2
Fixed bug with overflowing long values in the control
Fixed ie11 bug to do with absolutely positioned children in flex parent.
Documentation ie11, styling and copy improvements

v2.0.0-alpha.11 / 2018-04-12

Minor fix since last alpha:

Fixed a flow type issue that was causing issues for consumers