This is project whose intent is to make the learning of final form as simple as possible. There are a varity of issues in the way Final Forms docs and instructional materials are laid out, but this project is an attempt to soften some of those sharp edges to make working with library more fun!
Final Form for folks who don't know is a form library written in Javascript that helps you cleanly maintain forms with a lot of potential interacitivty, logic, and state. It has the added benefit of being framework agnostic so folks who use React or Vue or "INSERT JS FRAMEWORK HERE" can adopt the patterns laid out in the core or vanilla Final Form.
- Clone this repo 🌱
git clone <this-repo> && cd <this-repo>
- Install its dependencies (Final Form and Webpack)
npm i
- Run the server
npm run serve
- Visit localhost at the port specified in the webpack config under dev server
curl http://localhost:8989
The project has two primary assets, the index.html document located at dist/index.html and the index.js script (located at src/index.js) which, when transpiled by Webpack via Babel becomes dist/main.js.
-
The index.html is an aggressively simple HTML form. It contains nothing but simple fields.
-
The index.js file attempts to demonstrate all of the essential pieces of the final form library including.
-
The creation of a form object:
const form = createForm({ initialValues, onSubmit, validate })
- Creating a subscription to a created form:
const unsubscribe = form.subscribe(()=>{})
- Registering fields on your form:
const unregisterField = form.registerField(inputName, (state) => {})
- Performing logic on submission:
// See first example where we supply an onSubmit function to createForm
const onSubmit = (values) => {
const { heroName, titleQualifier, title, land, weapon} = values
setTimeout(() => {
alert(`All hail ${heroName}, the ${titleQualifier.toLowerCase()} ${title} of ${land}, wielder of the ${weapon}!`)
}, 300)
}
- Create a project direction
mkdir learn-final-form-broh && cd learn-final-form-broh
- Initialize it as an NPM project
npm init -y
- Install some deps (including final form and a bundler)
npm i --save-dev webpack-cli
npm i --save final-form
- Create the following
- An entrypoint file for webpack src/index.js
- A dist directory with an index.html which looks for a main.js in the same directory
- A compile script (
webpack
) in your package.json
- Write your code!