https://github.com/jsdf/react-form-for
An expressive and intuitive form builder for React in the style of Rails' form_for
https://github.com/jsdf/react-form-for
Last synced: about 1 month ago
JSON representation
An expressive and intuitive form builder for React in the style of Rails' form_for
- Host: GitHub
- URL: https://github.com/jsdf/react-form-for
- Owner: jsdf
- Created: 2014-11-10T17:23:21.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-04-19T08:12:45.000Z (about 10 years ago)
- Last Synced: 2025-03-15T04:55:49.678Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 527 KB
- Stars: 37
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-form-for
An expressive and intuitive form builder for React, in the style of Rails' `form_for`
### example
```js
var React = require('react')
var {Form, Fields, Field} = require('react-form-for')
var {ListEditor} = require('react-form-for').Components
var DateField = require('./date-field')
var languages = require('./languages')
var ExampleForm = React.createClass({
getInitialState: function() {
return {value: {}}
},
handleChange: function(updatedValue) {
this.setState({value: updatedValue})
},
renderLanguageSelectOptions: function() {
return languages.map((name) =>
{name}
)
},
render: function() {
var {value} = this.state
var onChange = this.handleChange
return (
A Beautiful Form
}
help="Choose a date"
/>
{this.renderLanguageSelectOptions()}
)
}
})
React.render(, document.body)
```
#### Custom field components
A possible implementation of the `DateField` from the example above:
```js
var React = require('react')
var DateField = React.createClass({
render: function() {
return (
{this.props.label}
{this.props.help}
)
}
})
module.exports = DateField
```
Note the use of the important props `value`, `onChange` and `label` which are
provided by the form builder. Other props such as `help` are passed through from
the `` proxy components used above.
#### Overriding the default field component
```js
// as long as a component takes a `value` prop (and ideally a `label` prop)
// and an `onChange` callback prop, it can be used as a react-form-for field
var Input = require('react-bootstrap/Input')
var {Form, Fields, Field} = require('react-form-for')
var ExampleForm = React.createClass({
handleChange: function(updatedValue) {
this.setState({value: updatedValue})
},
// the checkbox Field gets an Input component with different layout classes
getCheckboxComponent: function() {
return (
)
},
render: function() {
var formOpts = {
onChange: this.handleChange,
fieldComponent: (
)
}
// all of these fields will be rendered as a react-bootstrap/Input
)
}
})
```
##### Warning
:warning: This module is pretty new and might have some bugs, please [file an issue](https://github.com/jsdf/react-form-for/issues)
if you encounter any problems.