Learn Final Form

What is this?

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!

What is Final Form?

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.

How do I run the final demo?

• 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

How is the project laid out?

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)
}

(WIP) How do I set up the demo

• 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!