2.0.13 • Published 10 months ago
octo-form v2.0.13
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
Screenshot
Install
With npm:
npm install --save octo-form
or yarn:
yarn add octo-form
Usage
- Import the component:
import { OctoForm } from 'octo-form';
- Create a yup schema
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(),
});
- Create a form component
const onSubmit: SubmitHandler<SampleFormType> = (data) => {
console.log(data);
}
<OctoForm defaultValues={defaultValues} schema={schema} onSubmit={onSubmit}>
<div className="container">
<FormInputText name="example" label="Example" />
<FormInputText name="exampleRequired" label="Example required" />
<FormInputDropdown name="iceCreamType" label="Ice Cream Type" options={iceCreamOptions} />
<FormInputText name="age" label="Age" />
<FormInputDate name="todaysDate" label="Today's date" />
<FormInputDateTime name="todaysDateAndTime" label="Today's date and time" />
<FormInputSlider name="volume" label="Volume" />
<FormInputCheckbox name="isVegan" label="Vegan" />
<Button
type="submit"
variant="contained"
>Submit</Button>
</div>
</OctoForm>
Contribute
Bump version and publish
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
2.0.13
10 months ago
2.0.11
11 months ago
2.0.7
12 months ago
2.0.12
11 months ago
2.0.9
11 months ago
2.0.10
11 months ago
2.0.8
11 months ago
2.0.2
1 year ago
2.0.4
12 months ago
2.0.6
12 months ago
2.0.1
1 year ago
2.0.0
1 year ago
1.0.24
1 year ago
1.0.23
1 year ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.20
2 years ago
1.0.16
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago