https://github.com/ajoslin/react-form-lifecycle

Effortless forms, no payload. Render-prop wrapper for npm.im/form-lifecycle
https://github.com/ajoslin/react-form-lifecycle

Last synced: about 2 months ago
JSON representation

Effortless forms, no payload. Render-prop wrapper for npm.im/form-lifecycle

• Host: GitHub
• URL: https://github.com/ajoslin/react-form-lifecycle
• Owner: ajoslin
• License: mit
• Created: 2018-04-10T22:07:04.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-07T00:23:19.000Z (over 6 years ago)
• Last Synced: 2024-10-12T20:49:09.774Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 19.5 KB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# react-form-lifecycle [![Build Status](https://travis-ci.org/ajoslin/react-form-lifecycle.svg?branch=master)](https://travis-ci.org/ajoslin/react-form-lifecycle)

> Effortless forms, no payload. Render-prop wrapper for [FormLifecycle](https://npm.im/form-lifecycle).

## Install

```

$ npm install --save react-form-lifecycle

```

## Usage

Recommended way of doing forms:

```jsx

var FormLifecycle = require('react-form-lifecycle')

var filterBoolean = require('boolean-filter-obj')

var isEmail = require('is-email-maybe')

function renderForm () {

  return  {

    var validationErrors = getValidationErrors(form)

    return  {

      e.preventDefault()

      if (Object.keys(validationErrors).length) {

        return lifecycle.error()

      } else {

        lifecycle.submit()

        sendApiRequest('submit-form', form.fields)

          .then(lifecycle.success, lifecycle.error)

      }

    }}>

      {form.error && 
Looks like there was a submission error: {form.error}
}

      {validationErrors.email && !form.pristine &&

        
{validationErrors.email.message}
}

       lifecycle.edit({ email: e.target.value })} />


      Submit

    

  }} />

}

function getValidationErrors (form) {

  return filterBoolean({

    email: !form.fields.email || !isEmail(form.fields.email)

      ? new Error('Please enter a valid email.')

      : null

  })

}

```

## API

## ``

#### Props

#### onChange

> `function (form, prevForm)` | optional

Called whenever the form is changed via [`lifecycle` methods](https://github.com/ajoslin/form-lifecycle#lifecyclecreatedata---form). Receives the newForm and prevForm as parameters.

#### onReset

> `function (form, prevForm)` | optional

Called whenever `lifecycle.reset` is called

#### onEdit

> `function (form, prevForm)` | optional

Called whenever `lifecycle.edit` is called

#### onSubmit

> `function (form, prevForm)` | optional

Called whenever `lifecycle.submit` is called

#### onError

> `function (form, prevForm)` | optional

Called whenever `lifecycle.error` is called

#### onSuccess

> `function (form, prevForm)` | optional

Called whenever `lifecycle.success` is called

#### formDefaults

> `object` | optional

These values will be passed to the new [FormLifecycle object](https://github.com/ajoslin/form-lifecycle) that is created when the component is instantiated.

Example: ``

#### render

> `function()` | *required*

` 
} />`


Also supports child render function:

`{({ form, lifecycle }) => 
}}`


The `render` prop function is called with an object containing the following:

- `form`: An instance of [FormLifecycle](https://github.com/ajoslin/form-lifecycle#api).

- `lifecycle`: An object containing all [FormLifecycle methods](https://github.com/ajoslin/form-lifecycle#api). When called, the form will be edited and re-rendered.

  - Example: `lifecycle.edit({ email: '[email protected]' })`.

## License

MIT © [Andrew Joslin](http://ajoslin.com)