yarn
yarn add hooked-formnpm
npm i --save hooked-formUMD
dev:
<script src="https://unpkg.com/hooked-form@latest/dist/hooked-form.umd.js"></script>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);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.
"resolve": {
"alias": {
"hooked-form": "hooked-form/dist/hooked-form.modern.js"
}
} "alias": {
"hooked-form": "hooked-form/dist/hooked-form.modern.js"
}Thanks goes to these wonderful people (emoji key):
 Laurens Lavaert 💻 |
 Jovi De Croock 🚇 |
 Jonathan Callewaert 🐛 |
 Andrew Rempe 💻 |
 Corentin Leruth 💻 |
 Pavel Ravits 🐛 |
 Tegan Churchill 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!