Informed

We have released V2!!!

Go to live examples, code and docs!

Introduction

Say hello to the best react form library you have ever used! Informed is an extensive, simple, and efficient solution for creating basic to complex forms in react. Out of the box you get the ability to grab and manipulate values, validate fields, create custom inputs, and much much more!!!

Oh and YES WE USE HOOKS!!

Getting Started

Install with npm

npm install --save informed

Create a Simple Form

1import { Form, Text } from 'informed';
2
3<Form>
4  <label>
5    First name:
6    <Text field="name"/>
7  </label>
8  <button type="submit">Submit</button>
9</Form>;

Create a Simple Form With Validation

1import { Form, Text } from 'informed';
2
3const validate = value => {
4  return !value || value.length < 5
5    ? 'Field must be at least five characters'
6    : undefined;
7};
8
9<Form>
10  <label>
11    First name:
12    <Text field="name" validate={validate}/>
13  </label>
14  <button type="submit">Submit</button>
15</Form>;

Create a Complex Form

1import { Form, Text, Option, Select, Checkbox, Scope, TextArea, RadioGroup, Radio } from 'informed';
2
3<Form>
4  <label>First name:<Text field="name"/></label>
5  <Scope scope="favorite">
6    <label>Favorite color:<Text field="color"/></label>
7    <label>Favorite food:<Text field="food"/></label>
8  </Scope>
9  <label>Friend 1:<Text field="friends[0]" /></label>
10  <label>Friend 2:<Text field="friends[1]" /></label>
11  <label>Friend 3:<Text field="friends[2]" /></label>
12  <label>Bio:<TextArea field="bio"/></label>
13  <RadioGroup field="gender">
14    <label>Male <Radio value="male"/></label>            
15    <label>Female <Radio value="female"/></label>
16  </RadioGroup>
17  <label>
18    Relationship status:
19    <Select field="status">
20      <Option value="" disabled>
21        Select One...
22      </Option>
23      <Option value="single">Single</Option>
24      <Option value="relationship">Relationship</Option>
25      <Option value="complicated">Complicated</Option>
26    </Select>
27  </label>
28  <label>
29    Colors:
30    <Select
31      field="colors"
32      multiple
33    >
34      <Option value="red">Red</Option>
35      <Option value="green">Green</Option>
36      <Option value="blue">Blue</Option>
37      <Option value="yellow">Yellow</Option>
38      <Option value="orange">Orange</Option>
39      <Option value="purple">Purple</Option>
40    </Select>
41  </label>
42  <label>Authorize: <Checkbox field="authorize"/></label>
43  <button type="submit">Submit</button>
44</Form>

Access Form State with Hooks!

1import { Form, Text, useFormState } from 'informed';
2
3const ComponentUsingFormState = () => {
4  const formState = useFormState();
5  return (
6    <pre>
7      <code>{JSON.stringify(formState, null, 2)}</code>
8    </pre>
9  );
10};
11
12<Form>
13  <label>Name:<Text field="name" /></label>
14  <button type="submit">Submit</button>
15  <h5>Component using formState:</h5>
16  <ComponentUsingFormState />
17</Form>

Control Form via FormApi through the use of Hooks!!

1import { Form, Text, useFormApi } from 'informed';
2
3const ComponentUsingFormApi = () => {
4  const formApi = useFormApi();
5  return (
6    <button type="button" onClick={()=>
7      formApi.setValue(
8        'name', 
9        Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER)))}>
10      Random
11    </button>
12  );
13};
14  
15<Form>
16  <div>
17    <label>Name:<Text field="name"/></label>
18    <button type="submit">Submit</button>
19    <h5>Component using formApi:</h5>
20    <ComponentUsingFormApi />
21  </div>
22</Form>

Create custom inputs with built in validation!!

1import { Form, BasicText, asField } from 'informed';
2
3const validate = value => {
4  return !value || value.length < 5
5    ? 'Field must be at least five characters'
6    : undefined;
7};
8
9const ErrorText = asField(({ fieldState, ...props }) => (
10  <React.Fragment>
11    <BasicText
12      fieldState={fieldState}
13      {...props}
14      style={fieldState.error ? { border: 'solid 1px red' } : null}
15    />
16    {fieldState.error ? (
17      <small style={{ color: 'red' }}>{fieldState.error}</small>
18    ) : null}
19  </React.Fragment>
20));
21
22<Form>
23  <label>
24    First name:
25    <ErrorText
26      field="name"
27      validate={validate}
28      validateOnChange
29      validateOnBlur
30    />
31  </label>
32  <button type="submit">Submit</button>
33</Form>;

Create dynamic forms

1import { Form, Text, RadioGroup, Radio } from 'informed';
2
3<Form>
4  {({ formState }) => (
5    <React.Fragment>
6      <label>First name:<Text field="name"/></label>
7      <label>Are you married?</label>
8      <RadioGroup field="married">
9        <label>Yes <Radio value="yes"/></label>
10        <label>No <Radio value="no"/></label>
11      </RadioGroup>
12      {formState.values.married === 'yes' ? (
13        <label >Spouse name:<Text field="spouse" /></label>
14      ) : null}
15      <button type="submit">Submit</button>
16    </React.Fragment>
17  )}
18</Form>

WARNING: writing this in the above way is fine, it works they way we expect and gets us what we need... BUT! There is a better way!

1import { Form, Text, RadioGroup, Radio, useFieldState } from 'informed';
2
3const Spouse = () => {
4  const { value: married } = useFieldState('married'); 
5  return married === 'yes' ? <label >Spouse name:<Text field="spouse" /></label> : null;
6};
7
8<Form>
9  <label>First name:<Text field="name"/></label>
10  <label>Are you married?</label>
11  <RadioGroup field="married">
12    <label>Yes <Radio value="yes"/></label>
13    <label>No <Radio value="no"/></label>
14  </RadioGroup>
15  <Spouse />
16  <button type="submit">Submit</button>  
17</Form>

Writing code the second way can typically save excess rendering! And, it looks much cleaner.

Create dynamic forms with dynamic arrays !!! Mind Blown!!!

1import { Form, Text, ArrayField } from 'informed';
2
3const DynamicArrays = () => {
4
5  return (
6    <div>
7      <Form>
8        <ArrayField field="sibling">
9          {({ add, fields }) => (
10            <>
11              <button onClick={add} type="button">
12                Add Sibling
13              </button>
14              {fields.map(({ field, key, remove }, i) => (
15                <label htmlFor={i} key={key}>
16                  Sibling {i}:
17                  <Text field={field} id={i} />
18                  <button type="button" onClick={remove}>
19                    Remove
20                  </button>
21                </label>
22              ))}
23            </>
24          )}
25        </ArrayField>
26        <button type="submit">Submit</button>
27        <FormState />
28      </Form>
29    </div>
30  );
31};