Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/insin/react-router-form
<Form> is to <form> as <Link> is to <a>
https://github.com/insin/react-router-form
experiment forms react react-component react-router
Last synced: 27 days ago
JSON representation
<Form> is to <form> as <Link> is to <a>
- Host: GitHub
- URL: https://github.com/insin/react-router-form
- Owner: insin
- License: mit
- Created: 2015-02-09T17:00:10.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-02-01T22:51:31.000Z (almost 7 years ago)
- Last Synced: 2024-10-06T05:03:15.767Z (about 1 month ago)
- Topics: experiment, forms, react, react-component, react-router
- Language: JavaScript
- Homepage: http://insin.github.io/react-router-form/
- Size: 52.7 KB
- Stars: 56
- Watchers: 3
- Forks: 10
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
## React Router ``
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]A `` component for use with [React Router](https://github.com/rackt/react-router) which does for `` what react-router's `` does for ``.
## Usage
A `` component renders a `` element with the contents you provide, hooks into the form's `onSubmit` event to extract user input and transitions to the configured route with user input data in the next location's state.
```js
import React from 'react'
import Form from 'react-router-form'let NewPost = React.createClass({
render() {
Add Post
}
})
```
For example, assuming you have the following routes, the component above would trigger the `onEnter` handler for the `add-post` route when the form is submitted:```js
```
Form data is set as a `body` property and the form's `method` is set as a `method` property in the next location's state:
```js
function handleAddPost(nextState, replaceState) {
console.log(nextState.location.state.method) // 'POST'
console.log(nextState.location.state.body) // {comment: '...'}
}
```## Goals
One of the key goals of this component is to make it easier to implement basic isomorphic forms in your React app.
If your `onEnter` handlers send back everything needed to re-render a form which has errors (i.e. validation errors *and* user input), then for a little extra effort your React components can handle form submissions on both client and server:
```js
function handleAddPost(nextState, replace, callback) {
let comment = nextState.location.state.body
let {topicId} = nextState.params
ForumService.addComment({comment, topicId})
.then(({page}) => {
replace(`/topics/${topicId}?page=${page}`)
})
.catch(errors => {
replace({
pathname: `/topics/${topicId}/new-post`,
state: {comment, errors}.
})
})
.finally(callback)
}
```## Install
```sh
# For React Router 3.x
npm install react-router-form# For React Router 1.x
npm install react-router-form@1
``````js
import Form from 'react-router-form'
// or
const Form = require('react-router-form')
```Browser bundles are available, which export a global `ReactRouterForm` variable and expect to find a global ``React`` variable to work with.
* [react-router-form.js](https://unpkg.com/react-router-form/umd/react-router-form.js) (development version)
* [react-router-form.min.js](https://unpkg.com/react-router-form/umd/react-router-form.min.js) (compressed production version)## MIT Licensed
[build-badge]: https://img.shields.io/travis/insin/react-router-form/master.png?style=flat-square
[build]: https://travis-ci.org/insin/react-router-form[npm-badge]: https://img.shields.io/npm/v/react-router-form.png?style=flat-square
[npm]: https://www.npmjs.org/package/react-router-form[coveralls-badge]: https://img.shields.io/coveralls/insin/react-router-form/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/insin/react-router-form