Gathering detailed insights and metrics for react-select
Gathering detailed insights and metrics for react-select
Installations
npm install react-selectScore
83.2
Supply Chain
90.6
Quality
88.6
Maintenance
100
Vulnerability
99.6
License
Releases
57
react-select@5.8.3
react-select@5.8.3
Published on 09 Nov 2024
react-select@5.8.2
react-select@5.8.2
Published on 26 Oct 2024
react-select@5.8.1
react-select@5.8.1
Published on 19 Sept 2024
react-select@5.8.0
react-select@5.8.0
Published on 06 Nov 2023
react-select@5.7.7
react-select@5.7.7
Published on 02 Oct 2023
react-select@5.7.6
react-select@5.7.6
Published on 02 Oct 2023
Developer
Developer Guide
BETA
Module System
CommonJS, ESM
Min. Node Version
Typescript Support
Yes
Node Version
16.20.2
NPM Version
8.19.4
Statistics
27,668 Stars
4,239 Commits
4,129 Forks
222 Watching
22 Branches
430 Contributors
Updated on 28 Nov 2024
Bundle Size
93.99 kB
Minified
30.11 kB
Minified + Gzipped
Languages
TypeScript (99.3%)
JavaScript (0.68%)
CSS (0.01%)
Total Downloads
Cumulative downloads
Total Downloads
1,116,006,645
Last day
-8.2%
880,546
Compared to previous day
Last week
1.7%
4,989,353
Compared to previous week
Last month
7%
21,298,806
Compared to previous month
Last year
-9.8%
266,796,651
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
React-Select
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.
We are an open source project that is continuously supported by the community.
React Select helps you develop powerful select components that just work out of the box, without stopping you from customising the parts that are important to you.
For the story behind this component, watch Jed's talk at React Conf 2019 - building React Select
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
Using an older version?
- v3, v4, and v5 upgrade guide
- v2 upgrade guide
- React Select v1 documentation and examples are 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:
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}
Props
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 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 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 input
Methods
React-select exposes two public methods:
focus()- focus the control programmaticallyblur()- blur the control programmatically
Customisation
Check the docs for more information on:
- Customising the styles
- Using custom components
- Using the built-in animated components
- Creating an async select
- Allowing users to create new options
- Advanced use-cases
- TypeScript guide
TypeScript
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.
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, 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 ❤️
License
MIT Licensed. Copyright (c) Jed Watson 2022.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
all changesets reviewed
Reason
GitHub workflow tokens follow principle of least privilege
Details
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/release.yml:15
- Info: topLevel 'contents' permission set to 'read': .github/workflows/release.yml:9
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
7 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 5
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/JedWatson/react-select/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/JedWatson/react-select/release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/JedWatson/react-select/release.yml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
Reason
81 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-42xw-2xvc-qx8m
- Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
- Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
- Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
- Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-325j-24f4-qv5x
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
5.3
/10
Last Scanned on 2024-11-25
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