sbx-react-form-burlak
v0.0.12
Published
sbx-react-form-burlak
Downloads
3
Readme
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