React forms library based on json schema form.
npm install @talend/react-forms
This library is designed to be used on top of react-jsonschema-form, a React component for building Web forms from JSONSchema.
In addition of Mozilla lib, this wrapper uses react-bootstrap to not have to maintain Bootstrap markup.
Run npm install --save @talend/react-forms.
The forms can be used like any other React components.
You'll have to pass it a JSONSchema and a onSubmit callback as a minimum to
handle forms rendering and get the data back.
``javascript
import Form from '@talend/react-forms';
class MyForm extends React.Component {
onSubmit(formData) {
console.log(formData);
}
onCancel() {
console.log('Cancelled');
}
render() {
const actions = [
{ style: 'link', onClick: this.onCancel, type: 'button', label: 'CANCEL' },
{ style: 'primary', type: 'submit', label: 'VALIDATE' },
];
return
Here is the archetype of the data property required to render the form:
json
{
"jsonSchema": {},
"uiSchema": {},
"properties": {}
}
`$3
Forms now render a react-talend-components
component for each action given to it.
Each action accept the following properties :| property | propType | required | default | doc |
| ---------------- | :----------------: | :------: | :-------: | :-------------------------------------------------------------------------------------------: |
| iconPosition | other | no | - |
| icon | string | no | - |
| hideLabel | bool | no | - |
| disabled | bool | no | {false} |
| style | string | no | "default" | equivalent to action bsStyle
props |
| iconTransform | string | no | - |
| id | string | no | - |
| inProgress | bool | no | {false} |
| label | string | yes | - |
| link | bool | no | - |
| model | object | no | - |
| name | string | no | - | render a name button html property |
| onClick | func | yes | - | execute the callback with formData, formId, propertyName, propertyValue as parameters |
| tooltip | bool | no | - |
| tooltipPlacement | other | no | "top" |
| type | 'submit'\|'button' | no | - | by default render a button without submit type |$3
If uiSchema has some triggers like
`json
{
"jsonSchema": {
"id": "ListExample",
"type": "object",
"properties": {
"propertyName": {
"type": "string",
"enum": ["option 0", "option 1", "option 2"]
}
}
},
"uiSchema": {
"propertyName": {
"ui:trigger": ["after"]
}
},
"properties": {}
}
`Then
will be triggered when propertyName field value has changed.`javascript
import Form from '@talend/react-forms';class MyForm extends React.Component {
onChange(formData, formId, propertyName, propertyValue) {
console.log(formData, formId, propertyName, propertyValue);
}
onSubmit(formData) {
console.log(formData);
}
render() {
return
;
}
}
`$3
The data and actions PropTypes are exported for easy reuse.
You can use them by importing the DataPropTypes and ActionsPropTypes functions.
javascript
import Form, { DataPropTypes, ActionsPropTypes } from '@talend/react-forms';
`$3
You can use validation from outside (let say button outside the form) this way:
javascript
import validate from '@talend/react-forms/lib/validate';function isValid({ payload }) {
return validate(payload.jsonSchema, payload.formData);
}
``@talend/react-forms comes with react-ace lazy loaded.
Modes are loaded from CDN. No more additional config is required.
Copyright (c) 2006-2016 Talend
Licensed under the Apache V2 License