sbx-react-form-burlak v0.0.12

SBX React Form Burlak

sbx i --save sbx-react-form-burlak

import Form from 'sbx-react-form-burlak';
<Form
    onSubmit={(data, instance) => {
        //for visual loading must return Promise
        console.log(data, instance);
    }}
    title={
        text: 'title',
        htmlBefore: {
            html: (scope) => {
                return(<div>Before</div>)
            },
            inline: bool,
            error: bool, // red text color
            className: string
        },
        htmlAfter: (scope) => {
            return(<div>Before</div>)
        }
    }
    autoReset={true} //auto reset fields after success submit
    beforeSubmit={(scope) => {}}
    afterSubmit={(scope) => {}}
    theme="light" // ['','light', 'dark']
    fields={[
        {
            name: 'name',
            type: 'text',
            label: 'Your name',
            placeholder: 'Peter Griffin',
            value: 'Peter Griffin',
            validation: (value, otherValuesInForm) => {
                //otherValuesInForm for match password and repassword or something like that
                if(value.length <= 4) return 'Name is required' //If something returned, it's error under field and form can't submit
            },
            resetButton: {
                enable: true,
                title: 'reset password' // attribute title on reset button
                className: 'my-class'
            },
            statusIcon: {
                enable: true // show status of fields (success/error),
            },
            htmlBefore: () => {},
            htmlAfter: () => {}
        },{
            name: 'password',
            type: 'password',
            label: 'Your password',
            validation: (value) => {
                if(value.length <= 4) return 'Password is required'
            },
            resetButton: {
                enable: true
            },
            switchButton: {
                enable: true //enable only for password, powered by method switchField(name, type)
            },
            statusIcon: {
                enable: true
            }
        },{
            type: 'text',
            name: 'phone',
            label: 'Your phone',
            mask:'+0 (000) 000-00-00' //masked input, 0 - number, A - any register char(latin, cyrilic)
        },{
            type: 'submit',
            value: 'Send'
        }
    ]}
/>

Documentation is not finished