chakra-react-select - npm Package Compare versions

Comparing version 3.3.0-beta.1 to 3.3.0

package.json

		{
		"name": "chakra-react-select",
		"version": "3.3.0-beta.1",
		"version": "3.3.0",
		"description": "A Chakra UI wrapper for the popular library React Select",
		@@ -5,0 +5,0 @@ "license": "MIT",

README.md

		@@ -46,2 +46,3 @@ # chakra-react-select
		- [Custom `LoadingIndicator` (Chakra `Spinner`)](#custom-loadingindicator-chakra-spinner)
		- [`useChakraSelectProps`](#usechakraselectprops)
		- [Usage with React Form Libraries](#usage-with-react-form-libraries)
		@@ -646,2 +647,47 @@ - [`react-hook-form`](#react-hook-form)

		## `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. 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";
		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;
		```

		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
		@@ -648,0 +694,0 @@

chakra-react-select - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics