0.1.30 • Published 3 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
3 years ago
0.1.11
3 years ago
0.1.12
3 years ago
0.1.14
3 years ago
0.1.15
3 years ago
0.1.27
3 years ago
0.1.28
3 years ago
0.1.29
3 years ago
0.1.21
3 years ago
0.1.22
3 years ago
0.1.23
3 years ago
0.1.24
3 years ago
0.1.25
3 years ago
0.1.26
3 years ago
0.1.16
3 years ago
0.1.17
3 years ago
0.1.18
3 years ago
0.1.19
3 years ago
0.1.10
3 years ago
0.1.9
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.4
3 years ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago