From 14e6f3d3c7e813d0c7414f7d16791184fb9cef23 Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 19:14:40 +0200 Subject: [PATCH 01/15] Update README.md --- README.md | 121 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 70 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 8b299d1..05f6527 100644 --- a/README.md +++ b/README.md @@ -52,67 +52,86 @@ const Form = () => { } ``` -## 🔥 Avanced Example +## 🔥 Examples + +### Validation ```typescript -import ReactDOM from 'react-dom' -import { useForm } from 'formhero' - const Form = () => { - const { auto, form, errors } = useForm({ - username: '', - password: '', - type: 'formhero', - awesome: true, - }, { - username: /^test/, - password: { - validator: /^.{3,}$/, - message: 'To short', - }, - awesome: (value) => !!value - }) + const { auto, form, errors } = useForm({ + username: '', + email: '', + password: '' + }, { + username: value => value.length > 3, + email: { + validator: /@/, + message: 'Must contain an @', + }, + password: [ + { + validator: /[A-Z]/, + message: 'Must contain an uppercase letter' + }, + { + validator: /[\d]/, + message: 'Must contain a digit' + }, + ] + }) - const _submit = (e: React.FormEvent) => { - e.preventDefault() - console.log(form, errors) - } + return ( +
- return ( -
- - -
Username
- - {errors.username && 'Something went wrong'} -
+

Errors & Validation

-
Password
- -
+ + {errors.username && 'Must be longer than 3'} -
Which one to choose?
- -
+ + {errors.email} -
Is it awesome?
- e.target.checked - })} /> -
+ + {errors.password} - - -
- ) + + ) +} +``` + +### Easy Customization + +Often it happens that you use a specific input or framework, so the default getter, setter and extractor for the event won't cut it. No worries: formhero got you covered! + +```typescript +const Form = () => { + + const { auto, form, errors } = useForm({ + awesome: true, + }) + + return ( +
{ + e.preventDefault() + console.log(form) + }}> + +

Custom

+ + + + + +
+ ) } ``` From e3398b8571f03e4b4bab0092d2483ddbe3f1a015 Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 19:16:45 +0200 Subject: [PATCH 02/15] Update README.md --- README.md | 104 +++++++++++++++++++++++++++--------------------------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index 05f6527..9845837 100644 --- a/README.md +++ b/README.md @@ -59,44 +59,44 @@ const Form = () => { ```typescript const Form = () => { - const { auto, form, errors } = useForm({ - username: '', - email: '', - password: '' - }, { - username: value => value.length > 3, - email: { - validator: /@/, - message: 'Must contain an @', - }, - password: [ - { - validator: /[A-Z]/, - message: 'Must contain an uppercase letter' - }, - { - validator: /[\d]/, - message: 'Must contain a digit' - }, - ] - }) + const { auto, form, errors } = useForm({ + username: '', + email: '', + password: '' + }, { + username: value => value.length > 3, + email: { + validator: /@/, + message: 'Must contain an @', + }, + password: [ + { + validator: /[A-Z]/, + message: 'Must contain an uppercase letter' + }, + { + validator: /[\d]/, + message: 'Must contain a digit' + }, + ] + }) - return ( -
+ return ( + -

Errors & Validation

+

Errors & Validation

- - {errors.username && 'Must be longer than 3'} + + {errors.username && 'Must be longer than 3'} - - {errors.email} + + {errors.email} - - {errors.password} + + {errors.password} -
- ) + + ) } ``` @@ -107,31 +107,31 @@ Often it happens that you use a specific input or framework, so the default gett ```typescript const Form = () => { - const { auto, form, errors } = useForm({ - awesome: true, - }) + const { auto, form, errors } = useForm({ + awesome: true, + }) - return ( -
{ - e.preventDefault() - console.log(form) - }}> + return ( + { + e.preventDefault() + console.log(form) + }}> -

Custom

+

Custom

- + - + -
- ) + + ) } ``` From 6b074972305ddb481d1296f8900e38ec2e515485 Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 19:19:10 +0200 Subject: [PATCH 03/15] Update README.md --- README.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/README.md b/README.md index 9845837..cb61cb7 100644 --- a/README.md +++ b/README.md @@ -189,3 +189,21 @@ const validators = { } } ``` + +###### Example: Multiple Validators + +```javascript +const validators = { + username: [{ + validator: /^[A-z]*$/, + message: 'My custom error message', + }, + /[\d]/, + async (value) => value.length > 0, + { + validator: (value) => true, + message: 'Some other error', + } + ] +} +``` From 891cd11d6ca197b32dd1e5d710a26991a261b5ac Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 19:19:48 +0200 Subject: [PATCH 04/15] Update README.md --- README.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index cb61cb7..d6168e5 100644 --- a/README.md +++ b/README.md @@ -194,16 +194,17 @@ const validators = { ```javascript const validators = { - username: [{ - validator: /^[A-z]*$/, - message: 'My custom error message', - }, - /[\d]/, - async (value) => value.length > 0, - { - validator: (value) => true, - message: 'Some other error', - } + username: [ + { + validator: /^[A-z]*$/, + message: 'My custom error message', + }, + /[\d]/, + async (value) => value.length > 0, + { + validator: (value) => true, + message: 'Some other error', + } ] } ``` From 30147bdae602cc28f529c4a7feb578c4c846a509 Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 19:30:04 +0200 Subject: [PATCH 05/15] Update README.md --- README.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d6168e5..ff79974 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,23 @@ - Tiny - React Hooks +###### Links + +- [*See it in action HERE*](https://cupcakearmy.github.io/formhero/) +- [Examples](#Examples) +- [Docs](#Documentation) + - Contructor + - [Initial State](#Initial) + - [Validators](#Validators) + - [Options](/#Options) + - Returns + - [auto](#Auto) + - [form](#Form) + - [errors](#Errors) + - [isValid](#isValid) + - [update](#Update) + + ###### Installation ``` @@ -135,7 +152,7 @@ const Form = () => { } ``` -## 📖 Docs +## 📖 Documentation ### `useForm` From 5588a0c043033d7828e2b7917f61ff9146d2e9f8 Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 19:31:10 +0200 Subject: [PATCH 06/15] Update README.md --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index ff79974..c209d40 100644 --- a/README.md +++ b/README.md @@ -17,18 +17,18 @@ ###### Links - [*See it in action HERE*](https://cupcakearmy.github.io/formhero/) -- [Examples](#Examples) -- [Docs](#Documentation) +- [Examples](#-examples) +- [Docs](#-documentation) - Contructor - - [Initial State](#Initial) - - [Validators](#Validators) - - [Options](/#Options) + - [Initial State](#initial) + - [Validators](#validators) + - [Options](/#options) - Returns - - [auto](#Auto) - - [form](#Form) - - [errors](#Errors) - - [isValid](#isValid) - - [update](#Update) + - [auto](#auto) + - [form](#form) + - [errors](#errors) + - [isValid](#isvalid) + - [update](#update) ###### Installation From a45d4940dab1fa6e8fdbbe674c085634551eac55 Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 19:50:35 +0200 Subject: [PATCH 07/15] Update README.md --- README.md | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 67 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c209d40..7525339 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,8 @@ ###### Links -- [*See it in action HERE*](https://cupcakearmy.github.io/formhero/) +- [*Live Web*](https://cupcakearmy.github.io/formhero/) +- [*Live React-Native*](https://snack.expo.io/@cupcakearmy/useform) - [Examples](#-examples) - [Docs](#-documentation) - Contructor @@ -225,3 +226,68 @@ const validators = { ] } ``` + +### Options + +Sometimes it's practical to have some different default values when using for example react-native or some other framework where the default `value`, `onChange` and `(e)=> e.target.value` do not apply. + +###### Example: React Native (Method 1 - Global options) + +[Check the Expo Snack for a live preview](https://snack.expo.io/@cupcakearmy/useform) + +``` +import * as React from 'react'; +import { Text, SafeAreaView, TextInput } from 'react-native'; +import { useForm } from 'formhero'; + +const initial = { + username: 'i am all lowercase', +}; +const validators = {}; +const options = { + setter: 'value', // This is not stricly necessarry as 'value' would already be the default. + getter: 'onChangeText', + extractor: text => text.toLowerCase(), +}; + +export default () => { + const { form, auto } = useForm(initial, validators, options); + + return ( + + + {form.username} + + ); +}; +``` + +###### Example: React Native (Method 2 - Local overwrite) + +```javascipt +// ... + +export default () => { + const { form, auto } = useForm({ + username: 'i am all lowercase', + }); + + return ( + + text.toLowerCase(), + })} + /> + {form.username} + + ); +}; + +``` From c6a269519ee3566dbbd19b2a1d44f11a60de5b33 Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 19:51:29 +0200 Subject: [PATCH 08/15] Update README.md --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 7525339..a977168 100644 --- a/README.md +++ b/README.md @@ -16,8 +16,8 @@ ###### Links -- [*Live Web*](https://cupcakearmy.github.io/formhero/) -- [*Live React-Native*](https://snack.expo.io/@cupcakearmy/useform) +- [__*Live Web*__](https://cupcakearmy.github.io/formhero/) +- [__*Live React-Native*__](https://snack.expo.io/@cupcakearmy/useform) - [Examples](#-examples) - [Docs](#-documentation) - Contructor @@ -235,7 +235,7 @@ Sometimes it's practical to have some different default values when using for ex [Check the Expo Snack for a live preview](https://snack.expo.io/@cupcakearmy/useform) -``` +```javascript import * as React from 'react'; import { Text, SafeAreaView, TextInput } from 'react-native'; import { useForm } from 'formhero'; @@ -267,7 +267,7 @@ export default () => { ###### Example: React Native (Method 2 - Local overwrite) -```javascipt +```javascript // ... export default () => { From 74abea76c9b112ce1edee12f551304426686875f Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 20:01:55 +0200 Subject: [PATCH 09/15] Update README.md --- README.md | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) diff --git a/README.md b/README.md index a977168..649dbe6 100644 --- a/README.md +++ b/README.md @@ -291,3 +291,92 @@ export default () => { }; ``` + +### Auto + +The `auto` object is used to bind the form state to the input. + + +###### Example: Simple + +```javascript +const { auto } = useForm() + + +``` + + +###### Example: With custom options + +All are optional. + +```javascript +const { auto } = useForm() + + e.target.value +})} /> +``` + +## Form + +This is the form state that you can use when submitting the data + +###### Example + +```javascript + +const { form } = useForm(...); + +// ... + +
console.log(form)}> + // ... +
+``` + +## Errors + +This object contains the error messages if a field is not valid. +The error message can be specified by you, otherwise it will return `Error in ${field}` + +###### Example + +```javascript +const { errors } = useForm(...) + +//... + +{errors.username} +{errors.password} +``` + +###### isValid + +`isValid` is a little simple helper that checks whether the `error` object is clear or if there are errors left. + +## Update + +The `update` function allows you to manually change and assign the state of the form. This can be usefull when you want to reset a field or the whole form. The input must have the same type as the initial state. + +###### Example + +```javascript +const { form, update } = useForm(...) + +const resetUsername = () => { + update({ + ...form, + username: '', + }) +} + +const resetForm = () => { + update({ + username: '', + password: '', + }) +} +``` From 3bcd0657fa0cbe2d3d25b38f5089a0bdda3328a2 Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 20:02:45 +0200 Subject: [PATCH 10/15] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 649dbe6..233b596 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ - Contructor - [Initial State](#initial) - [Validators](#validators) - - [Options](/#options) + - [Options](#options) - Returns - [auto](#auto) - [form](#form) @@ -353,7 +353,7 @@ const { errors } = useForm(...) {errors.password} ``` -###### isValid +## isValid `isValid` is a little simple helper that checks whether the `error` object is clear or if there are errors left. From 63e46d981e8349ef75bb9de7dbbdfd470d859b4b Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 20:03:34 +0200 Subject: [PATCH 11/15] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 233b596..19f4022 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ - [__*Live Web*__](https://cupcakearmy.github.io/formhero/) - [__*Live React-Native*__](https://snack.expo.io/@cupcakearmy/useform) -- [Examples](#-examples) +- [Examples](https://github.com/CupCakeArmy/formhero/tree/master/examples) - [Docs](#-documentation) - Contructor - [Initial State](#initial) From 40978f8fc1bd950dbb2630679532799fe5f17979 Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 20:04:34 +0200 Subject: [PATCH 12/15] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 19f4022..b625574 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ - [__*Live Web*__](https://cupcakearmy.github.io/formhero/) - [__*Live React-Native*__](https://snack.expo.io/@cupcakearmy/useform) -- [Examples](https://github.com/CupCakeArmy/formhero/tree/master/examples) +- [Examples](#-examples) - [Docs](#-documentation) - Contructor - [Initial State](#initial) @@ -72,6 +72,8 @@ const Form = () => { ## 🔥 Examples +[**All Examples**](https://github.com/CupCakeArmy/formhero/tree/master/examples) + ### Validation ```typescript From 7c49ef08ae9a4e66022c620f289f64edf23e5c63 Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 20:05:46 +0200 Subject: [PATCH 13/15] Update README.md --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b625574..e5e3345 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ - [__*Live Web*__](https://cupcakearmy.github.io/formhero/) - [__*Live React-Native*__](https://snack.expo.io/@cupcakearmy/useform) -- [Examples](#-examples) +- [Examples](#examples) - [Docs](#-documentation) - Contructor - [Initial State](#initial) @@ -70,9 +70,7 @@ const Form = () => { } ``` -## 🔥 Examples - -[**All Examples**](https://github.com/CupCakeArmy/formhero/tree/master/examples) +## 🔥 Examples [(Examples Directory)](https://github.com/CupCakeArmy/formhero/tree/master/examples) ### Validation From 7acd5b0c64b7f25b779e7f949fee0f12d6511f5e Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 20:06:06 +0200 Subject: [PATCH 14/15] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e5e3345..561a049 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ - [__*Live Web*__](https://cupcakearmy.github.io/formhero/) - [__*Live React-Native*__](https://snack.expo.io/@cupcakearmy/useform) -- [Examples](#examples) +- [Examples](#-examples-examples-directory) - [Docs](#-documentation) - Contructor - [Initial State](#initial) From 9871587bc037576147df64f5107571410a260752 Mon Sep 17 00:00:00 2001 From: Nicco Date: Sat, 28 Sep 2019 20:06:29 +0200 Subject: [PATCH 15/15] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 561a049..81a8a5e 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ - [__*Live Web*__](https://cupcakearmy.github.io/formhero/) - [__*Live React-Native*__](https://snack.expo.io/@cupcakearmy/useform) -- [Examples](#-examples-examples-directory) +- [Examples](#-examples-more-here) - [Docs](#-documentation) - Contructor - [Initial State](#initial) @@ -70,7 +70,7 @@ const Form = () => { } ``` -## 🔥 Examples [(Examples Directory)](https://github.com/CupCakeArmy/formhero/tree/master/examples) +## 🔥 Examples [(More Here)](https://github.com/CupCakeArmy/formhero/tree/master/examples) ### Validation