diff --git a/CHANGELOG.md b/CHANGELOG.md index 6710bde..1c56964 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## v0.1.4 + +- feat: add `validator` export with built-in validators for easy use + ## v0.1.3 - feat: add `validate` method diff --git a/README.md b/README.md index 2099d54..668092e 100644 --- a/README.md +++ b/README.md @@ -51,59 +51,15 @@ const { field, handleSubmit, isValid, errors, state, rawState, setValue, setValu Use `field()` from the previous hook on your inputs, should support most input types: ```tsx +// you can import some built-in validators, or create your own +import { validator } from 'formplex-react' + n < 18 ? "Must be 18 or over" : null, - parse: Number, -})} /> - -``` - -## Quick-start - -See the [full documentation](https://chenasraf.github.io/formplex-react/) for all the available -options, return values and more examples. - -### Use the hook - -Start by calling the hook, passing in any options you would like for the form, and get the return -values as needed. - -This is a full example of a hook usage with all the available options and return values. All options -are optional, see the docs for each for more information. - -```tsx -const { field, handleSubmit, isValid, errors, state, rawState, setValue, setValues } = - useForm({ - initialState: { - firstName: 'John', - lastName: 'Doe', - }, - autoValidateBehavior: 'onChange', - errorMessages: { - required: 'This field is required', - minLength: (n) => `Must be more than ${n} chars long`, - maxLength: (n) => `Must be less than ${n} chars long`, - }, - onSubmit(values, e) { - console.log('Form submitted:', values) - fetch('/submit', { method: 'POST', body: JSON.stringify(values) }) - }, - }) -``` - -### Register an input - -Use `field()` from the previous hook on your inputs, should support most input types: - -```tsx - - n < 18 ? "Must be 18 or over" : null, + validate: validator.min(18, 'Must be 18 or over'), + // You can implement the above validator yourself like this: + // validate: (n) => n < 18 ? "Must be 18 or over" : null, parse: Number, })} />