2.0.0-alpha.5 • Published 3 years ago

carry-on-react-forms v2.0.0-alpha.5

Weekly downloads
3
License
MIT
Repository
github
Last release
3 years ago

carry-on-forms

Read the documentation at: https://dfadev.github.io/carry-on

carry-on plugin to add React form components

Usage

import { register, State } from "carry-on-react";
import { form, Form, FormButtons, Field } from "carry-on-react-forms";

register({
  state: {
    siteConfig: {
      name: "Hello World",
      byline: "the timeless greeting"
    }
  }
});

register({
  state: ({ set }) => ({
    counter: {
      value: 0,
      inc: () => set(state => void state.counter.value++, "Inc"),
      dec: () => set(state => void state.counter.value--, "Dec")
    }
  })
});

register(
  form({
    init: {
      field: "value",
      checkbox: false,
      slowfield: "zzz"
    },
    onSubmit: ({ get, set }) => values => true,
    onReset: ({ get, set }) => values => {},
    onValidate: ({ get, set }) => vals =>
      new Promise((resolve, reject) => {
        resolve({
          isValid: true,
          errors: {
            field: "invalid"
          }
        });
      })
  })
);

const App = () => (
  <div>
    <State constant>
      {({ siteConfig: { name, byline } }) => (
        <>
          <h1>{name}</h1>
          <h6>{byline}</h6>
        </>
      )}
    </State>
    <hr />
    <h4>Magical Counter</h4>
    <State debounce={500}>
      {({ counter: { value, inc, dec } }) => (
        <>
          <div>{value}</div>
          <button onClick={inc}>inc</button>
          <button onClick={dec}>dec</button>
        </>
      )}
    </State>
    <hr />
    <Form>
      <Field path="field">
        {({ element, touched, error }) => (
          <div>
            <input {...element} />
            {touched && error && <div>{error}</div>}
          </div>
        )}
      </Field>
      <hr />
      <Field path="checkbox" type="checkbox">
        {({ element, touched, error }) => (
          <div>
            <input type="checkbox" {...element} />
            {touched && error && <div>{error}</div>}
          </div>
        )}
      </Field>
      <hr />
      <Field path="slowfield" throttle={1000}>
        {({ element, touched, error }) => (
          <div>
            <input {...element} />
            {touched && error && <div>{error}</div>}
          </div>
        )}
      </Field>
      <hr />
      <FormButtons>
        {({ submit, reset }) => (
          <div>
            <button {...submit}>submit</button>
            <button {...reset}>reset</button>
          </div>
        )}
      </FormButtons>
      <hr />
    </Form>
  </div>
);
2.0.0-alpha.3

3 years ago

2.0.0-alpha.4

3 years ago

2.0.0-alpha.5

3 years ago

2.0.0-alpha.2

3 years ago

1.0.20

4 years ago

1.0.19

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

5 years ago

0.0.51

6 years ago

0.0.50

7 years ago

0.0.49

7 years ago

0.0.48

7 years ago

0.0.47

7 years ago

0.0.46

7 years ago

0.0.45

7 years ago

0.0.44

7 years ago

0.0.43

7 years ago

0.0.42

7 years ago

0.0.41

7 years ago

0.0.40

7 years ago

0.0.39

7 years ago

0.0.38

7 years ago

0.0.37

7 years ago

0.0.36

7 years ago

0.0.35

7 years ago

0.0.34

7 years ago

0.0.33

7 years ago

0.0.32

7 years ago

0.0.31

7 years ago

0.0.30

7 years ago

0.0.29

7 years ago

0.0.28

7 years ago

0.0.27

7 years ago

0.0.26

7 years ago

0.0.25

7 years ago

0.0.24

7 years ago

0.0.23

7 years ago

0.0.22

7 years ago

0.0.21

7 years ago

0.0.20

7 years ago

0.0.19

7 years ago

0.0.18

7 years ago

0.0.17

7 years ago

0.0.16

7 years ago

0.0.15

7 years ago

0.0.14

7 years ago

0.0.13

7 years ago

0.0.12

7 years ago

0.0.11

7 years ago

0.0.10

7 years ago