chakra-react-select - npm Package Compare versions

Comparing version 3.3.6 to 3.3.7

package.json

 {
   "name": "chakra-react-select",
-  "version": "3.3.6",
+  "version": "3.3.7",
   "description": "A Chakra UI wrapper for the popular library React Select",
@@ -35,2 +35,3 @@ "license": "MIT",
     "prepare": "husky install",
+    "postpublish": "git push --tags",
     "prepublishOnly": "npm run build",
@@ -104,3 +105,5 @@ "start": "nodemon --watch src --exec npm run build -e ts,tsx"
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "tag": "chakra1"
   },
@@ -107,0 +110,0 @@ "exports": {

README.md

@@ -1,3 +0,5 @@
-# chakra-react-select
+# chakra-react-select v3
 
+> This version of `chakra-react-select` is for compatibility with React v17 and Chakra UI v1. It will be maintained until the majority of users have migrated to the newest version of Chakra. If you're using [Chakra UI v2](https://chakra-ui.com/guides/migration) check [the docs for chakra-react-select v4 here](https://github.com/csandman/chakra-react-select).
+
 [![Build Status](https://github.com/csandman/chakra-react-select/actions/workflows/build.yml/badge.svg?branch=main "Build Status")](https://github.com/csandman/chakra-react-select/actions/workflows/build.yml?query=branch%3Amain)
@@ -19,4 +21,4 @@ [![Lint Status](https://github.com/csandman/chakra-react-select/actions/workflows/lint.yml/badge.svg?branch=main "Lint Status")](https://github.com/csandman/chakra-react-select/actions/workflows/lint.yml?query=branch%3Amain)
 
-- Vanilla JS: https://codesandbox.io/s/chakra-react-select-demo-65ohb?file=/example.js
-- TypeScript: https://codesandbox.io/s/chakra-react-select-ts-demo-vz9ut?file=/app.tsx
+- Vanilla JS: https://codesandbox.io/s/chakra-react-select-demo-v3-fq7o7q?file=/example.js
+- TypeScript: https://codesandbox.io/s/chakra-react-select-ts-demo-v3-30vgwj?file=/app.tsx
 
@@ -55,8 +57,8 @@ **NOTE:** Before leaving an issue on this project, remember that this is just a _wrapper_ for `react-select`, not a standalone package. A large percent of the questions people have end up being about how `react-select` itself works, so please read through their documentation to familiarize yourself with it! https://react-select.com/home
 
-In order to use this package, you'll need to have `@chakra-ui/react` set up [like in the guide in their docs](https://chakra-ui.com/docs/getting-started#installation). If you don't have Chakra UI installed already, you can install it like this:
+In order to use this package, you'll need to have `@chakra-ui/react` set up [like in the guide in their v1 docs](https://v1.chakra-ui.com/guides/first-steps). If you don't have Chakra UI installed already, you can install it like this:
 
 ```sh
-npm i @chakra-ui/react @emotion/react@^11.8.1 @emotion/styled@^11 framer-motion@^6
+npm i @chakra-ui/react@^1 @emotion/react@^11.8.1 @emotion/styled@^11 framer-motion@^6
 # ...or...
-yarn add @chakra-ui/react @emotion/react@^11.8.1 @emotion/styled@^11 framer-motion@^6
+yarn add @chakra-ui/react@^1 @emotion/react@^11.8.1 @emotion/styled@^11 framer-motion@^6
 ```
@@ -66,8 +68,8 @@
 
-After Chakra UI is setup, [install this package from NPM](https://www.npmjs.com/package/chakra-react-select):
+After Chakra UI is setup, [install v3 of this package from NPM](https://www.npmjs.com/package/chakra-react-select) using either the `@3` version tag or the `@chakra1` npm tag:
 
 ```sh
-npm i chakra-react-select
+npm i chakra-react-select@chakra1
 # ...or...
-yarn add chakra-react-select
+yarn add chakra-react-select@chakra1
 ```
@@ -208,3 +210,3 @@
 
-- Example: https://codesandbox.io/s/chakra-react-select-hasstickygroupheaders-wg39g?file=/example.js
+- Example: https://codesandbox.io/s/chakra-react-select-hasstickygroupheaders-v3-tmwnp4?file=/example.js
 
@@ -359,3 +361,3 @@ ```js
 ```js
-// Demo: https://codesandbox.io/s/chakra-react-select-dropdown-indicator-flip-lhc4ep?file=/example.js
+// Demo: https://codesandbox.io/s/chakra-react-select-dropdown-indicator-flip-v3-xqhyet?file=/example.js
 
@@ -417,7 +419,7 @@ const chakraStyles = {
 - Dropdown menu attached to control example:
-  - TypeScript: https://codesandbox.io/s/chakra-react-select-chakrastyles-5yh6q?file=/app.tsx
-  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-chakrastyles-vanilla-kgdnf?file=/example.js
+  - TypeScript: https://codesandbox.io/s/chakra-react-select-chakrastyles-v3-3wus8g?file=/app.tsx
+  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-chakrastyles-vanilla-v3-tewves?file=/example.js
 - Default [Chakra `<Select />`](https://chakra-ui.com/docs/form/select) styles example:
-  - TypeScript: https://codesandbox.io/s/chakra-react-select-styled-like-a-default-chakra-select-qwq3o?file=/app.tsx
-  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-styled-like-a-default-chakra-select-vanilla-iydfe?file=/example.js
+  - TypeScript: https://codesandbox.io/s/chakra-react-select-styled-like-a-default-chakra-select-v3-7273qk?file=/app.tsx
+  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-styled-like-a-default-chakra-select-vanilla-v3-edv95f?file=/example.js
 
@@ -474,3 +476,3 @@ ### Theme Styles
 
-Here is an example of using classNames to style the components: https://codesandbox.io/s/chakra-react-select-classnameprefix-demo-4r2pe?file=/example.js
+Here is an example of using classNames to style the components: https://codesandbox.io/s/chakra-react-select-classnameprefix-demo-v3-50pqn2?file=/example.js
 
@@ -545,3 +547,3 @@ ## TypeScript Support
 
-CodeSandbox: https://codesandbox.io/s/chakra-react-select-custom-icons-xf7scd?file=/example.js
+CodeSandbox: https://codesandbox.io/s/chakra-react-select-custom-icons-v3-utx0i5?file=/example.js
 
@@ -620,4 +622,4 @@ ```js
 
-- Vanilla JS: https://codesandbox.io/s/chakra-react-select-custom-option-d99s7?file=/example.js
-- TypeScript: https://codesandbox.io/s/chakra-react-select-custom-icon-components-typescript-odi90k?file=/app.tsx
+- Vanilla JS: https://codesandbox.io/s/chakra-react-select-custom-option-v3-wt0jyw?file=/example.js
+- TypeScript: https://codesandbox.io/s/chakra-react-select-custom-icon-components-typescript-v3-d4g3w1?file=/app.tsx
 
@@ -673,4 +675,4 @@ ### Custom `LoadingIndicator` (Chakra `Spinner`)
 
-- 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
+- Vanilla JS: https://codesandbox.io/s/chakra-react-select-custom-loadingindicator-v3-wcjoi9?file=/example.js
+- TypeScript: https://codesandbox.io/s/chakra-react-select-custom-loadingindicator-typescript-v3-spwgcy?file=/app.tsx
 
@@ -735,13 +737,13 @@ ## `useChakraSelectProps`
 - `Controller` multi select with built-in validation
-  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-v7llc?file=/example.js
-  - TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-typescript-v8ps5?file=/app.tsx
+  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-v3-qnefi0?file=/example.js
+  - TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-typescript-v3-74ej6x?file=/app.tsx
 - `useController` multi select with built-in validation
-  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-n8wuf?file=/example.js
-  - TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-typescript-qcm23?file=/app.tsx
+  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-v3-dfzymf?file=/example.js
+  - TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-typescript-v3-nvbnbg?file=/app.tsx
 - `useController` single select
-  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-vanilla-js-11x4zk?file=/example.js
-  - TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-typescript-vylckh?file=/app.tsx
-- Multi select with `yup` validation
-  - Vanilla JS: _coming soon_
-  - TypeScript: _coming soon_
+  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-vanilla-js-v3-yi33cn?file=/example.js
+  - TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-typescript-v3-3hvkm7?file=/app.tsx
+- Multi select with `yup` validation (advanced example)
+  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-v3-iptkhu?file=/src/app.js
+  - TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-typescript-v3-odjkbd?file=/app.tsx
 
@@ -766,5 +768,5 @@ ### [`formik`](https://formik.org/)
 
-- React Vanilla JS Starter: https://codesandbox.io/s/chakra-react-select-vsvr0?file=/example.js
-- React Typescript Starter: https://codesandbox.io/s/chakra-react-select-typescript-4sce1?file=/app.tsx
-- Next.js Vanilla JS Starter: https://codesandbox.io/s/chakra-react-select-next-js-dtnsm?file=/pages/index.js
-- Next.js Typescript Starter: https://codesandbox.io/s/chakra-react-select-next-js-typescript-kscuf?file=/pages/index.tsx
+- React Vanilla JS Starter: https://codesandbox.io/s/chakra-react-select-v3-9ji1by?file=/example.js
+- React Typescript Starter: https://codesandbox.io/s/chakra-react-select-typescript-v3-lq24d0?file=/app.tsx
+- Next.js Vanilla JS Starter: https://codesandbox.io/s/chakra-react-select-next-js-v3-wbtmjv?file=/pages/index.js
+- Next.js Typescript Starter: https://codesandbox.io/s/chakra-react-select-next-js-typescript-v3-cl4htt?file=/pages/index.tsx

No alert changes

Improved metrics

Total package byte prevSize

433684

increased by0.2%

Number of lines in readme file

761

increased by0.26%

No dependency changes