Hooked-Form

Documentation

Example

🌍 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>

🎨 Example

import React from 'react';
import { HookedForm, useField } from 'hooked-form';

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

const App = () => {
  return (
    <HookedForm
      onSubmit={console.log}
      validateOnBlur
      initialValues={React.useMemo(() => ({ name: '' }), [])}
      validate={values => (values.name ? {} : { name: 'Required' })}
    >
      <h3>Hooked Form</h3>
      <StringField label="Name:" fieldId="name" />
      <input type="submit" value="Submit" />
    </HookedForm>
  );
};

render(<App />, document.body);

💿 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"
  }

📢 Credits

• Microbundle
• Performance-comparison

😍Contributors

Thanks goes to these wonderful people (emoji key):

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