React-live-form NPM

react-live-form

react-live-form is a library for building a live forms (forms with dynamic fields) based on React.

Demo | Source

Setup

Install with npm or yarn:

npm i react-live-form
# OR
yarn add react-live-form

Use in your project:

import React from 'react';
import LiveForm from 'react-live-form';

const formConfig = {
  formName: 'firstForm',
  fields: [
    {
      name: 'a',
      fieldType: 'input',
      props: {
        title: 'field a',
      },
      state: {
        value: {
          defaultValue: 5,
        },
      },
    },
    {
      name: 'b',
      fieldType: 'input',
      props: {
        title: 'field b',
      },
    },
    {
      name: 'c',
      fieldType: 'input',
      props: {
        title: 'field c',
      },
      state: {
        value: {
          defaultValue: 0,
          valueExpr: 'a + b',
        },
      },
    },
    {
      name: 'd',
      fieldType: 'input',
      props: {
        title: 'field d',
      },
      state: {
        value: {
          defaultValue: 0,
          valueExpr: 'c * 2',
        },
        display: {
          defaultValue: false,
          valueExpr: 'a > 10',
        },
        disabled: {
          defaultValue: false,
          valueExpr: 'a > 34',
        },
      },
    },
  ]
};

const MyComponent = () =>
  <LiveForm formConfig={formConfig} />;