1.0.48 • Published 3 months ago
react-native-chocoforms v1.0.48
react-native-chocoforms
A package that aims to automate form generation in react native. Doing so by passing a single configuration object to the component.
props
Component props
Parameter | Type | Description |
---|---|---|
form | object | Required. Your form configuration object, details below |
onFormChange | function | Required. Callback function that receives the updated form as a parameter |
lang | enUS/esMX | Required. Language in which the validation messages will be shown |
inputStyle | object | Optional. Style applied to each input in the form before interacted |
inputStyleTouched | object | Optional. Style applied to each input in the form when it is touched |
inputStyleBlured | object | Optional. Style applied to each input in the form when it is blurred |
Example of the configuration object
this.state= {
form: {
controls: {
UserName: {
elementType: 'input', // what kind of input should it render (input, currency, time, date, select)
elementConfig: { // Everything here will be copied to the input directly
placeholder: 'Username',
autoCapitalize: 'words'
},
label: 'Username*', // Label descriptive of the input
value: '',
errorMessage: '', // Error message of this specific input, managed by the component
validation: { // All validations
required: true,
isEmail: true, //Basic validation for an email format aaaa@bbb.cc
isPhone: false, // 10 digit number validation
isEmailOrPhone: false, // If it's either an email or a phone it's valid
limitAllowedCharacters: true, // Characters used must be one of these: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.1234567890
isPassword: false, // Checks for a min length of 6 characters, an uppercase and a number
minLength: false, // Minimun length of characters for the input to be valid
maxLength: false, // Max length of characters for the input to be valid
equalsTo: 'NameOfSomeOtherControlInTheConfiguration', // Validates that this input has the same value as another input in the controls part of the configuration
isUrl: false // Regex validation for an url
},
},
RoleID: {
elementType: 'select',
elementConfig: {
placeholder: 'Role',
},
label: 'Role*',
value: '',
text: '', // For 'select' only
options: [{ // For 'select' only
id: 1,
text: 'example'
},{
id: 2,
text: 'example 2'
}],
errorMessage: '',
validation: {
required: true
},
},
Password: {
elementType: 'input',
elementConfig: {
placeholder: 'Password',
autoCapitalize: 'none'
},
label: 'Password*',
value: '',
errorMessage: '',
validation: {
required: true,
isPassword: true
},
},
},
isValidForm: false, // Will determine if the form is inline with the validations in the config object.
generalError:{
show: true,
text: 'Some custom error you want to show'
}
}
}
Badges
1.0.48
3 months ago
1.0.47
3 months ago
1.0.44
9 months ago
1.0.43
9 months ago
1.0.42
9 months ago
1.0.41
9 months ago
1.0.46
9 months ago
1.0.45
9 months ago
1.0.40
1 year ago
1.0.39
1 year ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.38
2 years ago
1.0.16
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.20
2 years ago
1.0.26
2 years ago
1.0.25
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.29
2 years ago
1.0.28
2 years ago
1.0.27
2 years ago
1.0.33
2 years ago
1.0.32
2 years ago
1.0.31
2 years ago
1.0.30
2 years ago
1.0.37
2 years ago
1.0.15
2 years ago
1.0.36
2 years ago
1.0.14
2 years ago
1.0.35
2 years ago
1.0.34
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.5.1
2 years ago