diff --git a/README.md b/README.md index a5d99b50..93f1aaaa 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Fewer renders, better performance and no weird "intermediary states". ### 🔍 Optimized for flexibility -While Yup is supported, you're not limited to using a large Yup schema. Validation functions receive the form state as well as the field value. +While Yup is supported, you're not limited to using a single large Yup schema. Validation functions receive the form state as well as the field value. ```tsx (value, state) => @@ -94,22 +94,17 @@ return {children}; `useField` is where you harness the power of _Fielder_. ```tsx -const [nameProps, nameMeta] = useField({ - name: 'userName', - validate: useCallback( - v => - Yup.string() - .required() - .validateSync(v), - [] - ) +const [usernameProps, usernameMeta] = useField({ + name: 'username', + initialValue: 'fielder-user', + validate: validateUsername }); return ( <> - - {nameMeta.hasChanged && nameMeta.error && ( - {nameMeta.error} + + {usernameMeta.hasChanged && usernameMeta.error && ( + {usernameMeta.error} )} ); @@ -124,8 +119,11 @@ There are a whole number of additional arguments which can be passed to `useFiel > Note: Unlike other popular form libraries, _Fielder_ allows you to change config options (such as validation) at any time. -## Resources +## Additional resources + +For more info, tutorials and examples, visit the **[official docs site](https://fielder.andyrichardson.dev/)**! -For more info and examples, check out the **[official docs site](https://fielder.andyrichardson.dev/)**. +Also check out: -For a deeper dive on Fielder and why it exists, check out [this blog post](https://dev.to/andyrichardsonn/why-we-need-another-form-library-fielder-4eah). +- [[Article] Why we need another form library](https://dev.to/andyrichardsonn/why-we-need-another-form-library-fielder-4eah) +- [[Video] Getting started with Fielder](https://www.youtube.com/watch?v=wSorSlCkJwk) diff --git a/docs/src/index.mdx b/docs/src/index.mdx index da87fc18..475072d8 100644 --- a/docs/src/index.mdx +++ b/docs/src/index.mdx @@ -63,15 +63,18 @@ return {children}; `useField` is where you harness the power of _Fielder_. ```tsx -const [nameProps, nameMeta] = useField({ - name: 'userName', - validate: useCallback((v) => Yup.string().required().validateSync(v), []); +const [usernameProps, usernameMeta] = useField({ + name: 'username', + initialValue: 'fielder-user', + validate: validateUsername }); return ( <> - - {nameMeta.hasChanged && nameMeta.error && {nameMeta.error}} + + {usernameMeta.hasChanged && usernameMeta.error && ( + {usernameMeta.error} + )} ); ```