React cross Form
Easy form for react and react-native apps with validation.
We use the great validate.js library but you can use a custom validator.
Optional - You can use react-cross-inputs , Example with react cross inputs
This is only a logic component, react-cross-form just render your inputs with value, methods, validators.
Installation
Basic Usage
Props
key | type | Description |
---|---|---|
data | object (required) |
Document data |
fields | array (required) |
fileds to render. [{ key : 'age', component : NumberInput, label : 'Your Age', validators: { presence: true }: // And you can add here everything you need and your input will get this from props }] |
validateType | string (default: 'all') |
Choose When to show validation errors in each of the inputs fields? none - hide all. all - Show all onFocus - Show only on fields that then been focus onBlur - how only on fields that then been blur onChange- how only on fields that then been changed. |
showSkippingFieldsWarnings | boolean | Set true if you want to display validation error even if user skip on the input |
onFocus | function | Function that get called When input is focus, you need to call props.onFocus from your input |
onBlur | function | Function that get called When input is blur, you need to call porps.onBlur from your input |
onChange | function (required) |
The function that gets called When the input is changed, you need to call props.onChange and pass the new value from your input. See Input event for more details. |
onValidateStateChanged | function | Function that get called when the form validation state was changed, With this value you can enable/disable the form submit button |
requiredPrefix | string (Default is * ) |
You can use this to render input label with a required fields labels will render with '*' at the start of the string |
disabledAll | boolean | Set true if you want to disable all fields |
focusNextOnlyIfEmpty | boolean | Set true if you want to focus on the next input only if is empty |
render | fonction | if you want to customize the layout, for example, you want to wrapper any input with other element or put between the inputs some other element, you can use render props function that will get an object with all the inputs and return the view to render |
onChanged | function | This function will run after field onChange, helpful for manipulating other field onChange, see onChanged example |
Fields
Each field in the Fields array is an object that must to contain a key and component.
more info about field object:
key | type | Description |
---|---|---|
key | string(required) | Key of for the value in the data |
component | element(required) | Any component that you want to render, see what your componant will get Component props |
formatter | function | If you want to format the value, you can pass a function the received ({field, documentData}) and return the input value |
validators | object | For example: { presence: true, email: true }, you can learn more in https://validatejs.org/#validators and see More validate examples) |
customValidation | function | Pass function that get ()field, value and return array of validation errros, see CustomValidation exmple |
disabled | boolean | Input disabled value |
placeholder | string | Input placeholder value |
label | string | Input label value |
helpText | string | Sometimes we want to render help text under the field |
render | function | You can pass render method that return a component |
Fields configuration example
Input props
This exmple with all this props that input will get from react-cross-form
FocusNext
Your input will get focusNext funciton from props.
react native - use inside onSubmitEditing
<TextInput
onSubmitEditing={this.props.focusNext}
validators
We recommend you to work with validate.js guide to build your validators object.
but if you want, you can use our helper that can help you to build the object but he didn't include all the options
buildValidateJsObject
validators examples
You can learn more with validatejs docs: https://validatejs.org/#validator
Input event
There are 3 events that will pass to your inputs and you handle from the parent:
event | input side(event) | parent side(callback) |
---|---|---|
onFocus | Just run the funtion , you didn't need to pass any value | Your callback will get {key, value, isValid, initialValue, info} |
onChange | onChange(value) | Your callback will get {key, value, isValid, initialValue, updateData, info} |
onBlur | Just run the funtion , you didn't need to pass any value | Your callback will get {key, value, isValid, initialValue, updateData, info} |
info- you can pass to component parent any parameters you need with this events callbacs.
const info = {someKey: '123'}
// When you call onChange, info is the second parameters
// When you call onBlur or onFocus the info is the first one
<input
onFocus={e => this.props.onChange(info)}
onChange={value => this.props.onChange(value, info)}
onBlue={e => this.props.onChange(info)}
Parent events call backs
The parent will get an object with relevant data from the input event
{key, updateData , initialValue , isValid , info}**
- key - this value from the Field object
- updateData (only when onChange is called)
- initialValue - this is the inital value of your field from componentDidmount
- isValid - boolean value base of your validators from Field object
- value - this is the new value from your input
*when you call the onChange() from your input the first parameter is the new value
- info- all other info that your input will be passing thru the event call back
customValidation exmple
In this example we use libphonenumber-js to validate a phone number.
this customValidation need to be a function that get (field, value) and return an array of strings errors
Example with react cross inputs
The result of this exmple is:
Complex uses
1- Group number of inputs to one componet
In this example FullNameComponent will get props with a object call inputsGroup that include the firstName and lastName component as a function that return the comoponent, you can run the function with props that you eant to pass to the input,
see FullNameComponent as a group component example:
2 - Get ref of other field and change is value
Sometimes you want to enable value changing in what value to trigger a change in another field, for this case you can get from any input the ref of another input and run is props.change with the value
Example:
In this example AddressAutoComplete is a component with a dropdown of countries, when we select an option we get address and coordinates.
We want to achieve an update in the location input.
We pass in the field config onSelect function that called when user select address from the dropdown, the input will call the onSelect with the option and the input props, one of the props is the getOtherFieldRefByKey function.
we call getOtherFieldRefByKey from the input props and get the refs to location input and is parent.
in this example we use the parent props, the parent is the wrapper of the location input, we call the onChange with the new coordinates.
3 - onChanged example
Dependencies
- isEmpty/lodash
- validate.js