react-ts-form

Simple library for generating controlled form components based on typescript decorators.

1// decorate fields on your data class
2class SignUpFormData {
3
4  @Input({
5    component: TextInput,
6    meta: {
7      title: "Name",
8      required: true
9    }
10  })
11  public name: string;
12
13  @Input((value) => ({
14    component: TextInput,
15    meta: (value) => {
16
17      const meta = {
18        title: "Email",
19        required: true
20      };
21
22      if (value && !EMAIL_REGEX.test(value)) {
23        meta.feedback = 'Invalid email!';
24        meta.intent = 'danger';
25      }
26
27      return meta;
28    }
29  }))
30  public email: string;
31
32}
33
34import { Form } from "react-ts-form";
35import * as meta from "./my-form-templates";
36
37function SignUpForm({onChange, value}) {
38  return <Form clazz={SignUpFormData} value={value} onChange={onChange} meta={meta} />
39}