dynamic-forms-react

Install

yarn add https://github.com/densitylabs/dynamic-forms-react

Usage

Contact Us Form

import React, { Component } from 'react';

import { ContactUsForm } from 'dynamic-forms-react';

class Example extends Component {
  render () {
    return (
      <ContactUsForm
        endPoint="your-dynamic-form-endpoint"
        onSuccess={{'title': 'Successful', 'body': 'Your data was sent successfully.'}}
        onError={{'title': 'Error', 'body': 'An error has ocurred.'}}
      />
    )
  }
}

Custom Form using json schema and UI schema

import React, { Component } from 'react';

import { CustomForm } from 'dynamic-forms-react';

class Example extends Component {
  render () {
    return (
      <CustomForm
        formUrl={this.paramUrl('id')}
        onSubmit={(res) => (alert(res))}
        onError={(error) => alert(error)}
      />
    )
  }
}

The URL should contain the next structure

{
  "json_schema":{
    ...
  },
  "ui_schema":{
    ...
  }
}

Here is an example:

{
  "json_schema":{
    "title": "Name Form",
    "description": "A simple name form ",
    "type": "object",
    "required": [
      "name",
    ],
    "additionalProperties": false,
    "properties": {
      "name": {
        "type": "string",
        "title": "Name"
      }
    }
  },
  "ui_schema":{
    "name": {
      "ui:autofocus": true,
      "ui:title": "First and Last Name",
      "ui:emptyValue": ""
    },
  }
}

License

MIT © Density Labs