https://github.com/jmaister/octo-form
Combine react-form-hook, yup and Material UI to create beautiful and usable forms. Write less code.
https://github.com/jmaister/octo-form
form forms material-ui react react-hook-form reactjs wrapper yup
Last synced: 6 months ago
JSON representation
Combine react-form-hook, yup and Material UI to create beautiful and usable forms. Write less code.
- Host: GitHub
- URL: https://github.com/jmaister/octo-form
- Owner: jmaister
- License: mit
- Created: 2022-08-08T14:01:14.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-07-20T06:22:10.000Z (about 2 years ago)
- Last Synced: 2025-03-27T23:51:10.370Z (7 months ago)
- Topics: form, forms, material-ui, react, react-hook-form, reactjs, wrapper, yup
- Language: TypeScript
- Homepage:
- Size: 1.1 MB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# OctoForm
Write less code to create your forms.
OctoForm is a wrapper that combines Bootstrap 5 + react-hook-form + yup using ReactJS.
[Example repository https://github.com/jmaister/octo-form-example]([https://](https://github.com/jmaister/octo-form-example))
# Screenshot
# Install
With npm:
```bash
npm install --save octo-form
```
or yarn:
```bash
yarn add octo-form
```
# Usage
1. Import the component:
```jsx
import { OctoForm } from 'octo-form';
```
2. Create a yup schema
```ts
const iceCreamOptions: OptionLabel[] = [
{ value: "", label: "-- no flavor --" },
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" },
];
const dayOptions: OptionLabel[] = [
{ value: "", label: "-- no day --" },
{ value: "Monday", label: "Monday" },
{ value: "Tuesday", label: "Tuesday" },
{ value: "Wednesday", label: "Wednesday" },
{ value: "Thursday", label: "Thursday" },
{ value: "Friday", label: "Friday" },
{ value: "Saturday", label: "Saturday" },
{ value: "Sunday", label: "Sunday" },
];
const schema = yup.object({
example: yup.string(),
exampleRequired: yup.string().required(),
iceCreamType: yup.string().oneOf(iceCreamOptions.filter(o => o.label != "").map(option => option.value.toString())),
age: yup.number().positive().integer().moreThan(0).required(),
todaysDate: yup.date().required(),
todaysDateAndTime: yup.date().required(),
days: yup.array().of(yup.string().required().oneOf(dayOptions.filter(o => o.label != "").map(option => option.value.toString()))).required(),
volume: yup.number().positive().integer().min(0).max(10).required(),
});
```
3. Create a form component
```tsx
const onSubmit: SubmitHandler = (data) => {
console.log(data);
}
Submit
```
# Contribute
## Bump version and publish
```bash
yarn bump
```
# TODO
- File component
- Password component
- Number component: auto wity yup.number(), decimals?
- Add autocalculated field -> textfield with calculated value, watch/useWatch
- Table selection: https://mui.com/material-ui/react-table/#sorting-amp-selecting
- Edit data type T and submit data type S can be different, i.e. Subscription - SubscriptionData