Skip to content

Commit 33422b9

Browse files
committed
Add zod examples for react-hook-form
1 parent 57ef729 commit 33422b9

File tree

1 file changed

+7
-12
lines changed

1 file changed

+7
-12
lines changed

README.md

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -738,18 +738,13 @@ See this issue for some discussion about using this package with `react-hook-for
738738

739739
By default, `react-hook-form` uses [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) to reduced input renders however this only works for native HTML inputs. Because chakra-react-select is not a native HTML input, you'll need to use react-hook-form's [`Controller`](https://react-hook-form.com/api/usecontroller/controller) component or [`useController`](https://react-hook-form.com/api/usecontroller) hook in order to keep the value(s) tracked in `react-hook-form`'s state. Here are some examples using each:
740740

741-
- `Controller` multi select with built-in validation
742-
- Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-v7llc?file=/example.js
743-
- TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-typescript-v8ps5?file=/app.tsx
744-
- `useController` multi select with built-in validation
745-
- Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-n8wuf?file=/example.js
746-
- TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-typescript-qcm23?file=/app.tsx
747-
- `useController` single select
748-
- Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-vanilla-js-11x4zk?file=/example.js
749-
- TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-typescript-vylckh?file=/app.tsx
750-
- Multi select with `yup` validation (advanced example)
751-
- Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-tno8v?file=/src/app.js
752-
- TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-typescript-n7slhu?file=/app.tsx
741+
- `Controller` multi select with built-in validation [ [JavaScript](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) ]
742+
- `useController` multi select with built-in validation [ [JavaScript](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) ]
743+
- `useController` single select [ [JavaScript](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) ]
744+
- Multi select with [`yup`](https://github.com/jquense/yup) validation (advanced example) [ [JavaScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-tno8v?file=/src/app.js) | [TypeScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-typescript-n7slhu?file=/app.tsx) ]
745+
- Single select with [`yup`](https://github.com/jquense/yup) validation (advanced example) [ [JavaScript](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-yup-validation-y5kjc1?file=/src/app.js) | [TypeScript](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-yup-validation-typescript-phmv0u?file=/app.tsx) ]
746+
- Multi select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example) [ [JavaScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-zod-validation-cu0rku?file=/src/app.js) | [TypeScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-zod-validation-typescript-5fyhfh?file=/app.tsx) ]
747+
- Single select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example) [ [JavaScript](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-jd588n?file=/src/app.js) | [TypeScript](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-typescript-m1dqme?file=/app.tsx) ]
753748

754749
### [`formik`](https://formik.org/)
755750

0 commit comments

Comments
 (0)