react-native-form-engine
v2.0.1
Published
A JSON-powered form generator
Downloads
53
Maintainers
Readme
React Native Form Engine
JSON-powered form generator
Features
- Add customized templates with ease (for both inputs and ui components)
- inter-field validations
- Disable / Hide fields by conditions
How to use
Install through npm / yarn
$ cd <your-project-root> $ yarn install react-native-form-engine
Define your own fields and templates
const fields = [ { "path": "profileHeader", "template": "Text", "templateProps": { "title": "Your Profile", "type": "h1" } }, { "path": "userEmail", "template": "TextField", "templateProps": { "label": "Your Email" } }, // ...etc ] const templates = { Text: ({title, type}) => ( <Text style={[type === 'h1' && {fontSize: 24}]}>{title}</Text> ), TextField: ({label, value, onChange}) => ( <View style={{marginBottom: 16}}> <Text style={{fontWeight: 'bold'}}>{label}</Text> <TextInput value={value} onCh={onChange} /> </View> ), };
Render
FormEngine
, pass in the followingfields
arrayformValue
objectonChange
handlertemplates
(optional, fallback to default templates if not provided)
class MyComponent extends React.Component { state = { value: {} } render() { <FormEngine fields={fields} formValue={this.state.value} onChange={value => this.setState({ value })} templates={templates} /> } }
The fields will be rendered with their corresponding value (find by "path").
When user interacts with the form,
onChange
handler will be called with{ userEmail: '[email protected]' }
Then
MyComponent
will be responsible for updatingthis.state.value
, thereby triggering therender
method again and specific fields will be re-rendered (React's one-way binding).