https://github.com/stjepangolemac/form-example

An example app to showcase building custom helpers for form management in React.
https://github.com/stjepangolemac/form-example

context example final form react redux

Last synced: 5 months ago
JSON representation

An example app to showcase building custom helpers for form management in React.

• Host: GitHub
• URL: https://github.com/stjepangolemac/form-example
• Owner: stjepangolemac
• Created: 2018-08-27T18:30:16.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-08-30T13:31:52.000Z (over 7 years ago)
• Last Synced: 2025-06-17T04:39:07.420Z (8 months ago)
• Topics: context, example, final, form, react, redux
• Language: JavaScript
• Homepage:
• Size: 202 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# form-example

This is an example that shows how to implement React helpers to build and maintain forms.

The API is very similar to `redux-form` and `final-form` but I did no source code reading prior to developing this.

## Live demo

The demo is available on this [link](https://build-btbbnfwqty.now.sh). 

Submit errors can be caused by submitting 'fail please' in the `role` field or by submitting 'foo@bar.baz' in the `email` field.

## Scripts

- `yarn start` - start development server

- `yarn build` - build the bundle

- `yarn test` - run tests

## API

### Form

Accepts `onSubmit` and `pages` props. Pages are used to build wizard forms. Render function passes `submitting`, `submitFailed`, `submitFormError` props to the children.

```

  

    {({ submitting, ... }) => (

      ...

    )}

  

```

### Field

Accepts `name`, `component`, `validator`, and `type` props.

Passed component should know how to manage the props Field passes to it and they are structured like this:

``` js

{

  input: {

    id,

    value,

    onChange,

    onBlur

  },

  meta: {

    pristine,

    error,

    submitError

  }

}

```

The `Field` is used like this:

```

```

### FormPage

The `FormPage` is used to build multi-part (wizard) forms. It only accepts a `page` prop.

It will automatically render `Previous` and `Next` buttons. If there are errors on the page the user cannot go to the next page.

It is used like this:

```

  {() => (

    

      

        

      

      

        

        Submit me

      

    

  )}

```