Skip to content
Form library implemented with Hooks.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Jan 14, 2019
__tests__ chore: remove arrays May 21, 2019
docs
scripts slicing May 5, 2019
src refactor: cut bundle size in Form May 23, 2019
website refactor: field golfing Apr 28, 2019
.all-contributorsrc docs: update .all-contributorsrc Feb 28, 2019
.editorconfig init Nov 16, 2018
.gitignore
.npmignore
.travis.yml feat: getting the tests to work May 5, 2019
CHANGELOG.md chore: update changelog May 10, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Feb 3, 2019
LICENSE init Nov 16, 2018
README.md basic example Apr 13, 2019
package.json chore: update deps May 20, 2019
rollup.config.js chore: make use of ADVANCED_MODE May 9, 2019
tsconfig.json chore: optimise toPath May 23, 2019
tslint.json chore: optimise toPath May 23, 2019
yarn.lock chore: update deps May 20, 2019

README.md

Hooked-Form

All Contributors npm version Build Status Bundle size codecov

This form library was made only with functional components, making the initial goal of having reduced bundle size easier to achieve.

I hope to make libraries like these a more recurring theme, since focussing on reduced bundle size isn't only the concern of the application developer. It is also a commitment that should be made by library authors.

Docs

Example

Architecture

Installation

yarn

  yarn add hooked-form

npm

  npm i --save hooked-form

UMD

dev:

<script src="https://unpkg.com/hooked-form@latest/dist/hooked-form.umd.js"></script>

prod:

<script src="https://unpkg.com/hooked-form@latest/dist/prod/hooked-form.umd.js"></script>

Example

import React from 'react';
import { Form, Field } from 'hooked-form';

const StringField = ({ value, label, onChange, onFocus, onBlur, type, error, touched }) => {
  const onInput = React.useCallback((e) => onChange(e.currentTarget.value), [onChange]);
  return (
    <label>
      {label + ' '}
      <input value={value} onChange={onInput} onBlur={onBlur} onFocus={onFocus} type={type} />
      {touched && error && <div>{error}</div>}
    </label>
  )
}

const HookedForm = () => (
  <div>
    <h3>Hooked Form</h3>
    <Field label="Name:" component={StringField} fieldId="name" />
    <input type="submit" value="Submit" />
  </div>
);

export default Form({
  onSubmit: console.log,
  validateOnBlur: true,
  validateOnChange: true,
  mapPropsToValues: () => ({ name: '' }),
  validate: (values) => {
    const errors = {};
    if (!values.name) errors.name = 'Required';
    return errors;
  }
})(HookedForm);

Modern build

This library offers a modern build (ES2015 output), this is smaller and parses faster in the browser. So if you don't plan to target older browsers feel free to use this.

Webpack

  "resolve": {
    "alias": {
      "hooked-form": "hooked-form/dist/hooked-form.modern.js"
    }
  }

Parcel

  "alias": {
    "hooked-form": "hooked-form/dist/hooked-form.modern.js"
  }

FAQ

  • When initially submitting my form shows no errors?

    onSubmit your values get traversed however if the application doesn't know what your values are it can't set anything as touched. This can be solved with passing mapPropsToValues or initialValues.

Credits

Contributors

Thanks goes to these wonderful people (emoji key):

Jovi De Croock
Jovi De Croock

🚇 ⚠️ 👀 📖 💻
Laurens Lavaert
Laurens Lavaert

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

You can’t perform that action at this time.