Gathering detailed insights and metrics for react-select
Gathering detailed insights and metrics for react-select
Gathering detailed insights and metrics for react-select
Gathering detailed insights and metrics for react-select
The Select Component for React.js
npm install react-select
Typescript
Module System
Node Version
NPM Version
react-select@5.8.3
Published on 09 Nov 2024
react-select@5.8.2
Published on 26 Oct 2024
react-select@5.8.1
Published on 19 Sept 2024
react-select@5.8.0
Published on 06 Nov 2023
react-select@5.7.7
Published on 02 Oct 2023
react-select@5.7.6
Published on 02 Oct 2023
Updated on 06 Dec 2024
Minified
Minified + Gzipped
TypeScript (99.3%)
JavaScript (0.68%)
CSS (0.01%)
Cumulative downloads
Total Downloads
Last day
29%
Compared to previous day
Last week
0.1%
Compared to previous week
Last month
1.9%
Compared to previous month
Last year
-11.3%
Compared to previous year
The Select control for React. Initially built for use in KeystoneJS.
See react-select.com for live demos and comprehensive docs.
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.
For the story behind this component, watch Jed's talk at React Conf 2019 - building React Select
Features include:
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:
1import React from 'react'; 2import Select from 'react-select'; 3 4const options = [ 5 { value: 'chocolate', label: 'Chocolate' }, 6 { value: 'strawberry', label: 'Strawberry' }, 7 { value: 'vanilla', label: 'Vanilla' }, 8]; 9 10class App extends React.Component { 11 state = { 12 selectedOption: null, 13 }; 14 handleChange = (selectedOption) => { 15 this.setState({ selectedOption }, () => 16 console.log(`Option selected:`, this.state.selectedOption) 17 ); 18 }; 19 render() { 20 const { selectedOption } = this.state; 21 22 return ( 23 <Select 24 value={selectedOption} 25 onChange={this.handleChange} 26 options={options} 27 /> 28 ); 29 } 30}
1import React, { useState } from 'react'; 2import Select from 'react-select'; 3 4const options = [ 5 { value: 'chocolate', label: 'Chocolate' }, 6 { value: 'strawberry', label: 'Strawberry' }, 7 { value: 'vanilla', label: 'Vanilla' }, 8]; 9 10export default function App() { 11 const [selectedOption, setSelectedOption] = useState(null); 12 13 return ( 14 <div className="App"> 15 <Select 16 defaultValue={selectedOption} 17 onChange={setSelectedOption} 18 options={options} 19 /> 20 </div> 21 ); 22}
Common props you may want to specify include:
autoFocus
- focus the control when it mountsclassName
- apply a className to the controlclassNamePrefix
- apply classNames to inner elements with the given prefixisDisabled
- disable the controlisMulti
- allow the user to select multiple valuesisSearchable
- allow the user to search for matching optionsname
- generate an HTML input with this name, containing the current valueonChange
- subscribe to change eventsoptions
- specify the options the user can select fromplaceholder
- change the text displayed when no option is selectednoOptionsMessage
- ({ inputValue: string }) => string | null - Text to display when there are no optionsvalue
- control the current valueSee the props documentation for complete documentation on the props react-select supports.
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 controlmenuIsOpen
/ onMenuOpen
/ onMenuClose
- control whether the menu is openinputValue
/ 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 controldefaultMenuIsOpen
- set the initial open value of the menudefaultInputValue
- set the initial value of the search inputReact-select exposes two public methods:
focus()
- focus the control programmaticallyblur()
- blur the control programmaticallyCheck the docs for more information on:
The v5 release represents a rewrite from JavaScript to TypeScript. The types for v4 and earlier releases are available at @types. See the TypeScript guide for how to use the types starting with v5.
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, Tom Walker, Nathan Bierema, Eric Bonow, Emma Hamilton, Dave Brotherstone, Brian Vaughn, and the Atlassian Design System team who along with many other contributors have made this possible ❤️
MIT Licensed. Copyright (c) Jed Watson 2022.
No vulnerabilities found.
Reason
all changesets reviewed
Reason
GitHub workflow tokens follow principle of least privilege
Details
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
7 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 5
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
security policy file not detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
81 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-12-02
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More