From 5b7c81ac40188698dbd1b9ea3a29977cdb162407 Mon Sep 17 00:00:00 2001
From: Rall3n <nb.rallen@gmail.com>
Date: Thu, 13 Jan 2022 18:27:00 +0100
Subject: [PATCH] Update package `README.md` (#4914)

* Update `react-select/README.md`

* Remove trailing whitespace

Co-authored-by: Nathan Bierema <nbierema@gmail.com>
---
 packages/react-select/README.md | 58 ++++++++++++++++++++++++++-------
 1 file changed, 47 insertions(+), 11 deletions(-)

diff --git a/packages/react-select/README.md b/packages/react-select/README.md
index 00ce0c1dcb..413d5705d7 100644
--- a/packages/react-select/README.md
+++ b/packages/react-select/README.md
@@ -9,10 +9,10 @@ The Select control for [React](https://reactjs.com). Initially built for use in
 
 See [react-select.com](https://www.react-select.com) for live demos and comprehensive docs.
 
-See our [upgrade guide](https://github.com/JedWatson/react-select/issues/3585) for a breakdown on how to upgrade from v2 to v3.
-
 React Select is funded by [Thinkmill](https://www.thinkmill.com.au) and [Atlassian](https://atlaskit.atlassian.com). 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](https://youtu.be/yS0jUnmBujE)
+
 Features include:
 
 - Flexible approach to data, with customisable functions
@@ -21,11 +21,11 @@ Features include:
 - 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](https://youtu.be/Eb2wy-HNGMo) at ReactNYC in March 2018.
-
-See our [upgrade guide](https://react-select.com/upgrade-guide) for a breakdown on how to upgrade from v1 to v2.
+## Using an older version?
 
-The old docs and examples will continue to be available at [v1.react-select.com](https://v1.react-select.com).
+- [v3, v4, and v5 upgrade guide](https://react-select.com/upgrade)
+- [v2 upgrade guide](https://react-select.com/upgrade-to-v2)
+- React Select v1 documentation and examples are available at [v1.react-select.com](https://v1.react-select.com)
 
 # Installation and usage
 
@@ -37,6 +37,8 @@ yarn add react-select
 
 Then use it in your app:
 
+#### With React Component
+
 ```js
 import React from 'react';
 import Select from 'react-select';
@@ -52,8 +54,9 @@ class App extends React.Component {
     selectedOption: null,
   };
   handleChange = (selectedOption) => {
-    this.setState({ selectedOption });
-    console.log(`Option selected:`, selectedOption);
+    this.setState({ selectedOption }, () =>
+      console.log(`Option selected:`, this.state.selectedOption)
+    );
   };
   render() {
     const { selectedOption } = this.state;
@@ -69,6 +72,33 @@ class App extends React.Component {
 }
 ```
 
+#### With React Hooks
+
+```js
+import React, { useState } from 'react';
+import Select from 'react-select';
+
+const options = [
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+];
+
+export default function App() {
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  return (
+    <div className="App">
+      <Select
+        defaultValue={selectedOption}
+        onChange={setSelectedOption}
+        options={options}
+      />
+    </div>
+  );
+}
+```
+
 ## Props
 
 Common props you may want to specify include:
@@ -83,6 +113,7 @@ Common props you may want to specify include:
 - `onChange` - subscribe to change events
 - `options` - specify the options the user can select from
 - `placeholder` - change the text displayed when no option is selected
+- `noOptionsMessage` - ({ inputValue: string }) => string | null - Text to display when there are no options
 - `value` - control the current value
 
 See the [props documentation](https://www.react-select.com/props) for complete documentation on the props react-select supports.
@@ -118,15 +149,20 @@ Check the docs for more information on:
 - [Creating an async select](https://www.react-select.com/async)
 - [Allowing users to create new options](https://www.react-select.com/creatable)
 - [Advanced use-cases](https://www.react-select.com/advanced)
+- [TypeScript guide](https://www.react-select.com/typescript)
+
+## Typescript
+
+The v5 release represents a rewrite from JavaScript to Typescript. The types for v4 and earlier releases are available at [@types](https://www.npmjs.com/package/@types/react-select). See the [TypeScript guide](https://www.react-select.com/typescript) 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](https://twitter.com/jedwatson)
+If you like React Select, you should [follow me on twitter](https://twitter.com/jedwatson)!
 
-Shout out to [Joss Mackison](https://github.com/jossmac), [Charles Lee](https://github.com/gwyneplaine), [Ben Conolly](https://github.com/Noviny), [Dave Brotherstone](https://github.com/bruderstein), [Brian Vaughn](https://github.com/bvaughn), and the Atlassian Design System team ❤️
+Shout out to [Joss Mackison](https://github.com/jossmac), [Charles Lee](https://github.com/gwyneplaine), [Ben Conolly](https://github.com/Noviny), [Tom Walker](https://github.com/bladey), [Nathan Bierema](https://github.com/Methuselah96), [Eric Bonow](https://github.com/ebonow), [Mitchell Hamilton](https://github.com/mitchellhamilton), [Dave Brotherstone](https://github.com/bruderstein), [Brian Vaughn](https://github.com/bvaughn), and the [Atlassian Design System](https://atlassian.design) team who along with many other contributors have made this possible ❤️
 
 ## License
 
-MIT Licensed. Copyright (c) Jed Watson 2019.
+MIT Licensed. Copyright (c) Jed Watson 2021.