From 53d9395da9eef6837162ce91da2d8905be26334b Mon Sep 17 00:00:00 2001 From: cupcakearmy Date: Sat, 28 Sep 2019 17:20:56 +0200 Subject: [PATCH] examples --- examples/custom.tsx | 35 +++++++++++++++++ examples/errorsAndValidation.tsx | 31 +++++++++++++++ examples/index.html | 67 ++++++++++++++++++++++++++++++++ examples/select.tsx | 33 ++++++++++++++++ examples/simple.tsx | 30 ++++++++++++++ 5 files changed, 196 insertions(+) create mode 100644 examples/custom.tsx create mode 100644 examples/errorsAndValidation.tsx create mode 100644 examples/index.html create mode 100644 examples/select.tsx create mode 100644 examples/simple.tsx diff --git a/examples/custom.tsx b/examples/custom.tsx new file mode 100644 index 0000000..5fe6ac3 --- /dev/null +++ b/examples/custom.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import ReactDOM from 'react-dom' + +import { useForm } from '../dist' + +const Index: React.FC = () => { + + const { auto, form, errors } = useForm({ + awesome: true, + }) + + return ( +
{ + e.preventDefault() + console.log(form) + }}> + +

Custom

+ + + + + +
+ ) +} + +ReactDOM.render(, document.getElementById('custom')) \ No newline at end of file diff --git a/examples/errorsAndValidation.tsx b/examples/errorsAndValidation.tsx new file mode 100644 index 0000000..476ebf6 --- /dev/null +++ b/examples/errorsAndValidation.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import ReactDOM from 'react-dom' + +import { useForm } from '../' + +const Index: React.FC = () => { + + const { auto, form, errors } = useForm({ + username: '', + password: '' + }, { + username: value => value.length > 3, + password: /[\d]{1,}/ + }) + + return ( +
+ +

Errors & Validation

+ + + {errors.username && 'Must be longer than 3'} + + + {errors.password && 'Must contain a number'} + +
+ ) +} + +ReactDOM.render(, document.getElementById('errors')) \ No newline at end of file diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 0000000..b712881 --- /dev/null +++ b/examples/index.html @@ -0,0 +1,67 @@ + + + + + + Form Hero + + + + +
+

Open the console to see the submitted data

+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/examples/select.tsx b/examples/select.tsx new file mode 100644 index 0000000..6a5534b --- /dev/null +++ b/examples/select.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import ReactDOM from 'react-dom' + +import { useForm } from '../dist' + +const Index: React.FC = () => { + + const { auto, form, errors } = useForm({ + type: 'formhero', + }) + + return ( +
{ + e.preventDefault() + console.log(form) + }}> + +

Select

+ + + + + +
+ ) +} + +ReactDOM.render(, document.getElementById('select')) \ No newline at end of file diff --git a/examples/simple.tsx b/examples/simple.tsx new file mode 100644 index 0000000..f8449d9 --- /dev/null +++ b/examples/simple.tsx @@ -0,0 +1,30 @@ +import React from 'react' +import ReactDOM from 'react-dom' + +import { useForm } from '../dist' + +const Index: React.FC = () => { + + const { auto, form, errors } = useForm({ + username: 'unicorn', + password: '', + }) + + return ( +
{ + e.preventDefault() + console.log(form) + }}> + +

Simple

+ + + + + + +
+ ) +} + +ReactDOM.render(, document.getElementById('simple')) \ No newline at end of file