From e6b4006baca3f08791f6e85cb9c66f8963d499d9 Mon Sep 17 00:00:00 2001
From: Chris Sandvik <chris.sandvik@gmail.com>
Date: Mon, 18 Apr 2022 15:25:55 -0400
Subject: [PATCH 1/5] Export `useChakraSelectProps` hook for public use

---
 src/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/index.ts b/src/index.ts
index cc943d1..b34aa83 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,6 +7,8 @@ export { default as AsyncCreatableSelect } from "./async-creatable-select";
 
 export { default as chakraComponents } from "./chakra-components";
 
+export { default as useChakraSelectProps } from "./use-chakra-select-props";
+
 export type { SelectComponent } from "./select";
 export type { CreatableSelectComponent } from "./creatable-select";
 export type { AsyncSelectComponent } from "./async-select";

From 6f3d2bd87337bb7d0f54bad997e1aae18b36c846 Mon Sep 17 00:00:00 2001
From: Chris Sandvik <chris.sandvik@gmail.com>
Date: Mon, 18 Apr 2022 15:26:20 -0400
Subject: [PATCH 2/5] 3.3.0-beta.1

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8856210..f38db1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "chakra-react-select",
-  "version": "3.2.0",
+  "version": "3.3.0-beta.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "chakra-react-select",
-      "version": "3.2.0",
+      "version": "3.3.0-beta.1",
       "license": "MIT",
       "dependencies": {
         "react-select": "^5.3.0"
diff --git a/package.json b/package.json
index 7ecbab7..58655a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chakra-react-select",
-  "version": "3.2.0",
+  "version": "3.3.0-beta.1",
   "description": "A Chakra UI wrapper for the popular library React Select",
   "license": "MIT",
   "author": "Chris Sandvik <chris.sandvik@gmail.com>",

From c14747cde85d1dd2913471c2bfe4782083a48222 Mon Sep 17 00:00:00 2001
From: Chris Sandvik <chris.sandvik@gmail.com>
Date: Mon, 18 Apr 2022 16:35:53 -0400
Subject: [PATCH 3/5] Add documentation for `useChakraSelectProps`

---
 README.md | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/README.md b/README.md
index c76b00a..76e0aaf 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,7 @@ Check out the demos here:
 - [TypeScript Support](#typescript-support)
 - [Customizing Components](#customizing-components)
   - [Custom `LoadingIndicator` (Chakra `Spinner`)](#custom-loadingindicator-chakra-spinner)
+- [`useChakraSelectProps`](#usechakraselectprops)
 - [Usage with React Form Libraries](#usage-with-react-form-libraries)
   - [`react-hook-form`](#react-hook-form)
   - [`formik`](#formik)
@@ -642,6 +643,49 @@ CodeSandbox examples:
 - Vanilla JS: https://codesandbox.io/s/chakra-react-select-custom-loadingindicator-1n9q6d?file=/example.js
 - TypeScript: https://codesandbox.io/s/chakra-react-select-custom-loadingindicator-typescript-5gx6kz?file=/app.tsx
 
+## `useChakraSelectProps`
+
+Being a wrapper for `react-select`, all of the customizations done to react-select are passed in as props. There is a hook, [`useChakraSelectProps`](https://github.com/csandman/chakra-react-select/blob/main/src/use-chakra-select-props.ts) that handles merging any extra customizations from the end user with the customizations done by this package. In some cases you may simply want to use this hook to get the custom props and pass them into a `react-select` instance yourself.
+
+To do so, simply import the hook from this package, and call it by passing in any extra custom props you'd like into it and spread it onto a base `react-select` component:
+
+```jsx
+import { useChakraSelectProps } from "chakra-react-select";
+import Select from "react-select";
+
+const CustomSelect = (customSelectProps) => {
+  const selectProps = useChakraSelectProps(customSelectProps);
+
+  return <Select {...selectProps} />;
+};
+```
+
+One example of how you might use this is to customize the component `react-google-places-autocomplete`, which is an autocomplete dropdown for Google Places that uses the `AsyncSelect` from `react-select` as it's core. Therefor, it accepts all of the same select props as the core react-select does which means you can use the `useChakraSelectProps` to style it:
+
+```jsx
+import { useState } from "react";
+import { useChakraSelectProps } from "chakra-react-select";
+import ReactGooglePlacesAutocomplete from "react-google-places-autocomplete";
+
+const GooglePlacesAutocomplete = () => {
+  const [place, setPlace] = useState(null);
+
+  const selectProps = useChakraSelectProps({
+    value: place,
+    onChange: setPlace,
+  });
+
+  return (
+    <ReactGooglePlacesAutocomplete
+      apiKey="YOUR API KEY HERE"
+      selectProps={selectProps}
+    />
+  );
+};
+
+export default GooglePlacesAutocomplete;
+```
+
 ## Usage with React Form Libraries
 
 _This section is a work in progress, check back soon for more examples_

From 1f9cca6c1b7fc4a0f22699ae4e062fd92ff8ab5c Mon Sep 17 00:00:00 2001
From: Chris Sandvik <chris.sandvik@gmail.com>
Date: Mon, 18 Apr 2022 16:37:48 -0400
Subject: [PATCH 4/5] Add a note to the `useChakraSelectProps` docs

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 76e0aaf..b4a874c 100644
--- a/README.md
+++ b/README.md
@@ -686,6 +686,8 @@ const GooglePlacesAutocomplete = () => {
 export default GooglePlacesAutocomplete;
 ```
 
+**NOTE:** An API key would be needed to create a CodeSandbox example for this so you will have to implement it in your own project if you'd like to test it out.
+
 ## Usage with React Form Libraries
 
 _This section is a work in progress, check back soon for more examples_

From 49e0be43e1805a17e58c2c24ade6ce200040d397 Mon Sep 17 00:00:00 2001
From: Chris Sandvik <chris.sandvik@gmail.com>
Date: Mon, 18 Apr 2022 16:44:19 -0400
Subject: [PATCH 5/5] Fix a couple gramatial errors

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b4a874c..a9880db 100644
--- a/README.md
+++ b/README.md
@@ -660,7 +660,7 @@ const CustomSelect = (customSelectProps) => {
 };
 ```
 
-One example of how you might use this is to customize the component `react-google-places-autocomplete`, which is an autocomplete dropdown for Google Places that uses the `AsyncSelect` from `react-select` as it's core. Therefor, it accepts all of the same select props as the core react-select does which means you can use the `useChakraSelectProps` to style it:
+One example of how you might use this is to customize the component `react-google-places-autocomplete`, which is an autocomplete dropdown for Google Places that uses the `AsyncSelect` from `react-select` as it's core. Therefore, it accepts all of the same select props as the core react-select does which means you can use the `useChakraSelectProps` hook to style it:
 
 ```jsx
 import { useState } from "react";