react-form-blueprint

react-form-blueprint

Generate input controls from your models

Install

npm install --save react-form-blueprint

Usage

import React from 'react';
import { initFormOptions } from 'react-form-blueprint';

interface Person {
  firstName: string;
  age: number;
  dog: {
    color: string;
  };
}
const CustomInput = ({ errorMessage }: { errorMessage: string }) => {
  return (
    <div>
      <input type="radio" />
      <p>{errorMessage}</p>
    </div>
  );
};

const { getFormControls } = initFormOptions({
  customFormControls: {
    radio: {
      input: {
        component: CustomInput,
        presetProps: { errorMessage: 'Error dude!' },
      },
      label: { component: 'label' },
    },
  },
  label: { component: 'label' },
  input: { component: 'input' },
});

const formControls = getFormControls<
  Person,
  'firstName' | 'age' | 'dog.color'
>()({
  firstName: {
    type: 'text',
  },
  age: {
    type: 'number',
  },
  'dog.color': {
    type: 'radio',
  },
});

const App = () => {
  const { firstName, age, dogColor } = formControls;

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <firstName.label>Firstname</firstName.label>
        <firstName.input />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <age.label>Age</age.label>
        <age.input />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <dogColor.label>Dog Color</dogColor.label>
        <dogColor.input />
      </div>
    </>
  );
};

export default App;

License

MIT © pffigueiredo