0.1.30 • Published 2 years ago
react-mount-form v0.1.30
React Form Builder
Configuration
/* src/components/form-builders.ts */
import { FormBuilder } from 'react-mount-form';
/* If you want use the lib default components */
export FormBuilder();
/* If you want your own custom component */
import Input from "@src/components/input/Input";
import Select from "@src/components/select/Select";
import DatePicker from "@src/components/date-picker/DatePicker";
const config = {
inputsOptions: {
input: Input,
select: Select,
datePicker: DatePicker,
},
};
export default FormBuilder(config);
Using
/* src/App.tsx */
import FormBuilder from "@src/components/form-builder.ts";
const formConfig = {
title: "Person",
formContent: {
email: "james@gmail.com",
zodiac_sign: "lion",
date: "2020-09-13",
},
config: [
{
name: "email",
label: "Email",
config: {
inputType: "input",
style: {
cols: 12,
},
validation: {
required: true,
type: ValidationType.EMAIL,
},
},
},
{
name: "zodiac_sign",
label: "Zodiac Sign",
config: {
inputType: "select",
style: {
cols: 12,
},
props: {
options: [
{ label: "Capricornio", value: "capri" },
{ label: "Leao", value: "lion" },
],
},
validation: {
required: true,
},
},
},
{
name: "date",
label: "Birth Date",
config: {
inputType: "datePicker",
style: {
cols: 12,
},
validation: {
required: true,
},
},
},
],
};
const App = () => {
const onIsvalid = (p: Payload) => {
console.log("Data valid", p);
};
const onInvalid = (p: Payload) => {
console.log("Data invalid", p);
};
return (
<div className="page">
<div className="panel">
<FormBuilder
{...formConfig}
onValid={onIsvalid}
onInvalid={onInvalid}
/>
</div>
</div>
);
}
0.1.30
2 years ago
0.1.11
2 years ago
0.1.12
2 years ago
0.1.14
2 years ago
0.1.15
2 years ago
0.1.27
2 years ago
0.1.28
2 years ago
0.1.29
2 years ago
0.1.21
2 years ago
0.1.22
2 years ago
0.1.23
2 years ago
0.1.24
2 years ago
0.1.25
2 years ago
0.1.26
2 years ago
0.1.16
2 years ago
0.1.17
2 years ago
0.1.18
2 years ago
0.1.19
2 years ago
0.1.10
2 years ago
0.1.9
2 years ago
0.1.8
2 years ago
0.1.7
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago