Overview
Tiny React hook for managing form state. That's it. 🤏
- Headless form 🤖
- Super lightweight ⚡
- Easy to use 🤘
- Compatible with your favorite UI framework and validation package 💜
- TypeScript supported 🌞
Installation
Install package :
yarn add picoform
npm install picoform
How to use
Basic usage
import { useForm } from 'picoform';
export default function App() {
const { as, handleSubmit, values } = useForm();
const onSubmit = () => console.log(values);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...as('firstname')} />
<input {...as('lastname')} />
<button type="submit">Submit</button>
</form>
);
}
With initial values
import { useForm } from 'picoform';
const initialValues = {
firstname: 'John',
lastname: 'Doe',
};
export default function App() {
const { as, handleSubmit, values } = useForm({ initialValues });
const onSubmit = () => console.log(values);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...as('firstname')} />
<input {...as('lastname')} />
<button type="submit">Submit</button>
</form>
);
}
With yup
package
import { useForm } from 'picoform';
import * as yup from 'yup';
const schema = yup.object().shape({
username: yup.string().required(),
password: yup
.string()
.min(8)
.required(),
});
export default function App() {
const { as, handleSubmit, values } = useForm();
const onSubmit = async () => {
try {
await schema.validate(values);
console.log(values);
} catch (err) {
console.log(err);
}
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...as('username')} type="text" />
<input {...as('password')} type="password" />
<button type="submit">Submit</button>
</form>
);
}
With material-ui
package
import { useForm } from 'picoform';
import TextField from '@mui/material/TextField';
export default function App() {
const { as, handleSubmit, values } = useForm();
const onSubmit = () => console.log(values);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<TextField {...as('firstname')} />
<TextField {...as('lastname')} />
<Button type="submit">Submit</Button>
</form>
);
}