From ca4111e1529634187c37dd01f59cbe89123f5993 Mon Sep 17 00:00:00 2001 From: Benjamim Sonntag Date: Mon, 28 Mar 2022 13:39:28 +0100 Subject: [PATCH] Add example application --- .gitignore | 2 + example/index.html | 11 +++++ example/index.tsx | 115 +++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 4 files changed, 129 insertions(+) create mode 100644 example/index.html create mode 100644 example/index.tsx diff --git a/.gitignore b/.gitignore index ccc2930..5629329 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ /coverage /node_modules +.parcel-cache +.parcel-dist diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..26f3dc4 --- /dev/null +++ b/example/index.html @@ -0,0 +1,11 @@ + + + + + Example app + + +
+ + + diff --git a/example/index.tsx b/example/index.tsx new file mode 100644 index 0000000..1cf74bb --- /dev/null +++ b/example/index.tsx @@ -0,0 +1,115 @@ + +/** + * Module dependencies. + */ + +import { FormProvider, useField, useFormState } from '../src'; +import ReactDOM from 'react-dom'; + +/** + * `Input` component. + */ + +function Input({ label, name, type = 'text' }) { + const { meta, onBlur, onChange, onFocus, value } = useField(name); + + return ( + + ); +} + +/** + * `RerenderTester` component. + */ + +function RerenderTester() { + console.log('RerenderTester rendered'); // eslint-disable-line no-console + + return ( +
+ {'Re-render tester'} +
+ ); +} + +/** + * `SubmitButton` component. + */ + +function SubmitButton() { + const { isSubmitting } = useFormState(); + + return ( + + ); +} + +/** + * `App` component. + */ + +function App() { + return ( +
+

{'Hello world!'}

+ + { + console.log('submit', values); // eslint-disable-line no-console + + return new Promise(resolve => { + setTimeout(() => resolve, 5000); + }); + }} + > + {({ submit }) => ( +
+ + + + + + + + + )} +
+
+ ); +} + +/** + * Render app. + */ + +ReactDOM.render(, document.getElementById('app')); diff --git a/package.json b/package.json index 09cb3a5..15b7b67 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "coverage": "jest --coverage", "lint": "eslint --ext .js,.ts,.tsx .", "lint-staged": "lint-staged", + "start-example": "parcel --dist-dir=.parcel-dist example/index.html", "test": "jest", "test-watch": "jest --watch --notify --onlyChanged", "version": "NODE_ENV=production npm run bundle && npm run changelog --future-release=$npm_package_version && git add -A CHANGELOG.md dist"