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} + + ); +}; + +```