# react-informed

> Form library providing an easy way to create forms with react

Latest version **1.9.2** (published 2017-10-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-informed
pnpm add react-informed
yarn add react-informed
bun add react-informed
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.9.2 |
| Published | 2017-10-26 |
| First published | 2017-07-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Derek Hawker |
| Maintainers | derekhawker |
| Keywords | react, react-component, react-form, form |

## Links

- npm: https://www.npmjs.com/package/react-informed
- Repository: https://github.com/derekhawker/react-informed
- Homepage: https://github.com/derekhawker/react-informed#readme
- Issues: https://github.com/derekhawker/react-informed/issues
- npm.io page: https://npm.io/package/react-informed

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^0.14.0 || ^15.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^0.14.0 || ^15.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^0.14.0 || ^15.0.0
- [@types/react](https://npm.io/package/@types/react.md) ^0.14.0 || ^15.0.0
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^0.14.0 || ^15.0.0
- [@types/prop-types](https://npm.io/package/@types/prop-types.md) ^0.14.0 || ^15.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.9.2 (latest) — 2017-10-26
- 1.9.1 — 2017-10-24
- 1.9.0 — 2017-10-17
- 1.8.1 — 2017-09-21
- 1.8.0 — 2017-09-21
- 1.7.3 — 2017-09-15
- 1.7.1 — 2017-09-13
- 1.7.0 — 2017-09-12
- 1.6.1 — 2017-08-28
- 1.5.1 — 2017-08-25
- 1.4.1 — 2017-08-24
- 1.3.2 — 2017-08-14
- 1.2.0 — 2017-08-09
- 1.1.0 — 2017-08-09
- 1.0.6 — 2017-08-01
- … 5 more at https://npm.io/package/react-informed/versions

## README

**Informed** is a set of components to reduce the work needed to create forms with react.

There are already many different form solution in the react ecosystem. Informed tries to 
be different by minimizing boilerplate. Informed does not require decorated input 
elements, either. Typescript definitions are provided for easier form refactoring.

Click [here](https://derekhawker.github.io/react-informed/) to view a demo.   

```typescript
<Form value={form}
      preventAction={true}
      onChange={(form) => this.setState({form})}>

    <div>
        <label htmlFor={form.firstName.name}>First Name</label>
        <Field value={form.firstName} 
               debounce={50}>
            <input type="text"
                   placeholder="First Name"
                   disabled={form.isSubmitted}
            />
        </Field>
    </div>

    <div>
        <label htmlFor={form.lastName.name}>Last Name</label>
        <Field value={form.lastName}
               debounce="onBlur">
            <input type="text"
                   placeholder="Last Name"
                   disabled={form.isSubmitted}
            />
        </Field>
    </div>

    <div>
        <button disabled={!form.isValid || form.isSubmitted}
                className="btn btn-primary"
                type="submit">
            submit
        </button>
    </div>
</Form>
```

# Run examples #
See the docs/examples/ directory for examples on how to use this library. 
To run the examples locally:
    
    npm install
    npm start 

and open your browser to http://localhost:8000/ (if it doesn't open automatically)

# Goals #
- Input elements should not be passed as props or wrapped in odd ways. 
    * There should be full control over look and feel using standard HTML props
- Un-opinionated about how form state is stored 
    * set the form based on props like with a redux-store sol'n
    * or make use of a containing component's state
- Easily integrates custom components (just implement the value/onChange interface) 
- Typescript integration
- limit the amount of unnecessary boilerplate needed for controlled elements
  by automatically adding the needed value/onChange props

# Form State Object #
Every Form state object implements the BaseForm interface. There are several fields that
provide summary info about the form (is<*>).

```typescript
export interface BaseForm {
    /** true if the form was submitted. */
    isSubmitted?: boolean;
    /** true if any of the form fields have errors. If a field can only have an error if it is dirty.  */
    isError?: boolean;
    /** true if there are no errors on any fields. Unlike isError, this checks fields regardless of their dirty flag. */
    isValid?: boolean;
    /** true if the form values are different from their original values */
    isChanged?: boolean;

    [k: string]: any;
}
```

Finally, each Field is stored as a property where the name of the Field is set
to an InputState object.

# InputState #
Each InputState object has several properties that get updated automatically
allowing to easily update the UI in response to events like form errors.

There may be some confusion about the difference between error and honestError.
For example, a <Field> that is required but initialized with an
empty value will immediately have an error. But we wouldn't really indicate an
error unless the user had attempted to modify the input and then left its value
blank. To avoid having to perform tests against the dirty property, the error
property is provided.  

```typescript
export interface InputState<T> {
    /** property name of Field */
    name: string;
    /** Non-zero when the Field has an error (always 0 when dirty === false) */
    error: number;
    /** Non-zero when the Field has an error. Even when dirty === false) */
    honestError: number;
    /** value of Field*/
    value: T;
    /** True if the user has changed the form. Initial value is false */
    dirty: boolean;
    /** true if the current value is different (shallow comparison) from the original */
    changed: boolean;
}
```

# Field Usage #
<Field> should be a direct wrapper around the input element or custom component
you want to use. If you need to use a <div> or similar to control positioning
this should be placed around <Field> instead. 

If you look at the inspected html you can see that <Field> does not create a wrapper 
<div> element that would impact your layout. Field will directly render
its child, so configure whatever props you want. But do not set value or onChange.
those props will be overwritten. Both of those are accessible on the <Field> 
component so make use of them there.

# Save Form State # 
The <Form> element is configured like a regular controlled component. 
Implement the 'value' and 'onChange' props and the rest of the form takes care of itself

```typescript
    <Form value={form}
          onChange={(form) => this.setState({form})}>
          ...
    </Form>
```

# Future Goals and TODOs #
- Field does not update when props of a Field is changed manually
- 'validate' prop interface should accept a Promise for async validation
## Examples ##
- classic POST form

---
_Source: https://npm.io/package/react-informed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._