Formact
A zero dependency and design agnostic Form library for React.
Installation
In your terminal, add it to the project by running:
npm install --save formact
Usage
Creating fields
As formact is design agnostic, you'll need to create your own fields. You can it by using the hook useField
in a function component.
This how a TextField would look like:
import { useField, FieldProps } from 'formact'
export default function TextField(props: FieldProps & { label: string }) {
const field = useField<string>(props)
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
margin: '5px 10px',
}}>
<div>
<label htmlFor={props.name}>{props.label}</label>
</div>
<input
// @ts-ignore
data-testid={`field-${props.name}`}
name={props.name}
id={props.name}
type={props.type}
onBlur={(e) => {
// call field.onBlur to make sure the field is dirty
field.onBlur(e)
}}
// use field value
value={field.fieldValue || ''}
// update the field value
onChange={(e) => field.update(e.target.value)}
onKeyDown={(e) => {
// Submit the form when pressing enter
if (e.key === 'Enter') {
field.submit()
}
}}
/>
{field.showError ? (
<div data-testid={`field-error-${props.name}`} style={{ color: 'red' }}>
{field.errorMessage}
</div>
) : null}
</div>
)
}
A submit button:
export default function SubmitButton() {
const form = useForm()
return (
<button
data-testid="submit-button"
type="submit"
disabled={!form.valid}
onClick={form.submit}>
{form.submitting ? 'Submitting...' : 'Submit'}
</button>
)
}
Using the fields
These fields become really powerful when wrapped in a Form component.
import Form from "formact"
<Form onChange=(console.log) onSubmit={console.log}>
<TextField name="country" />
<SubmitButton />
</Form>
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
License
MIT