react-simple-form-builder

React simple form builder

Demo

git clone https://github.com/evheniy/react-simple-form-builder.git
cd react-simple-form-builder
npm i
npm run server

Open http://127.0.0.1:3000/

How to install

npm i -S react-simple-form-builder

How to use

import builder from 'react-simple-form-builder';

Label

const Label = builder.components.Label;

ReactDOM.render(
    <Label>label</Label>,
    document.getElementById('root')
);

List

const List = builder.components.List;

eactDOM.render(
    <List items={[
        <Label id="1">text1</Label>,
        <Label id="2">text2</Label>,
    ]} />,
    document.getElementById('root')
);

Button

const Button = builder.components.Button;

ReactDOM.render(
    <Button value={'button'} />,
    document.getElementById('root')
);

Text

const Text = builder.components.Text;

ReactDOM.render(
    <Text value={'text'} />,
    document.getElementById('root')
);

Submit

const Submit = builder.components.Submit;

ReactDOM.render(
    <Submit value={'submit'} />,
    document.getElementById('root')
);

Checkbox

const Checkbox = builder.components.Checkbox;

ReactDOM.render(
    <Label children={[
        <Checkbox value={'checkbox'} />,
        'checkbox',
    ]} />,
    document.getElementById('root')
);

Form

const Form = builder.components.Form;

ReactDOM.render(
    <Form method="GET" action="/" children={<List items={[
        <Label id="1">label</Label>,
        <Text value="5" id="5" />,
        <Label children={[
            <Checkbox value={'checkbox'} />,
            'checkbox'
        ]} text="test" id="4" />,
        <Button value={'button'} id="2" />,
        <Submit value={'submit'} id="3" />,
    ]} />} />,
    document.getElementById('root')
);

Testing

npm t