{"id":16593959,"url":"https://github.com/jsdf/react-form-for","last_synced_at":"2025-03-21T13:31:44.629Z","repository":{"id":23093000,"uuid":"26446971","full_name":"jsdf/react-form-for","owner":"jsdf","description":"An expressive and intuitive form builder for React in the style of Rails' form_for","archived":false,"fork":false,"pushed_at":"2015-04-19T08:12:45.000Z","size":540,"stargazers_count":37,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-15T04:55:49.678Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"MediaSocialNetwork/media-feed","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsdf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-10T17:23:21.000Z","updated_at":"2019-01-18T05:28:47.000Z","dependencies_parsed_at":"2022-08-21T19:50:44.181Z","dependency_job_id":null,"html_url":"https://github.com/jsdf/react-form-for","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Freact-form-for","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Freact-form-for/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Freact-form-for/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Freact-form-for/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsdf","download_url":"https://codeload.github.com/jsdf/react-form-for/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244806116,"owners_count":20513383,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T23:44:36.387Z","updated_at":"2025-03-21T13:31:44.313Z","avatar_url":"https://github.com/jsdf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-form-for\n\nAn expressive and intuitive form builder for React, in the style of Rails' `form_for`\n\n### example\n\n```js\nvar React = require('react')\nvar {Form, Fields, Field} = require('react-form-for')\nvar {ListEditor} = require('react-form-for').Components\n\nvar DateField = require('./date-field')\nvar languages = require('./languages')\n\nvar ExampleForm = React.createClass({\n  getInitialState: function() {\n    return {value: {}}\n  },\n  handleChange: function(updatedValue) {\n    this.setState({value: updatedValue})\n  },\n  renderLanguageSelectOptions: function() {\n    return languages.map((name) =\u003e\n      \u003coption key={name} value={name}\u003e{name}\u003c/option\u003e\n    )\n  },\n  render: function() {\n    var {value} = this.state\n    var onChange = this.handleChange\n\n    return (\n      \u003cForm for={value} onChange={this.handleChange}\u003e\n        \u003ch2\u003eA Beautiful Form\u003c/h2\u003e\n        \u003cField for=\"name\" autofocus /\u003e\n        \u003cField\n          for=\"birthday\"\n          component={\u003cDateField className=\"on-a-date\" /\u003e}\n          help=\"Choose a date\"\n        /\u003e\n        \u003cField for=\"language\" type=\"select\"\u003e\n          {this.renderLanguageSelectOptions()}\n        \u003c/Field\u003e\n        \u003cdiv className=\"panel collapsible\"\u003e\n          \u003cFields for=\"address\"\u003e\n            \u003cField for=\"street\" /\u003e\n            \u003cField for=\"town\" /\u003e\n            \u003cField for=\"state\" /\u003e\n          \u003c/Fields\u003e\n        \u003c/div\u003e\n        \u003cList for=\"members\" component={ListEditor}\u003e\n          \u003cField for=\"name\" /\u003e\n          \u003cField for=\"age\" /\u003e\n          \u003cField for=\"occupation\" /\u003e\n        \u003c/List\u003e\n      \u003c/Form\u003e\n    )\n  }\n})\n\nReact.render(\u003cExampleForm /\u003e, document.body)\n```\n\n#### Custom field components\nA possible implementation of the `DateField` from the example above:\n```js\nvar React = require('react')\n\nvar DateField = React.createClass({\n  render: function() {\n    return (\n      \u003cdiv\u003e\n        \u003clabel\u003e\n          {this.props.label}\n          \u003cinput\n            type=\"date\"\n            value={this.props.value}\n            onChange={this.props.onChange}\n          /\u003e\n        \u003c/label\u003e\n        \u003cspan\u003e{this.props.help}\u003c/span\u003e\n      \u003c/div\u003e\n    )\n  }\n})\n\nmodule.exports = DateField\n```\nNote the use of the important props `value`, `onChange` and `label` which are\nprovided by the form builder. Other props such as `help` are passed through from\nthe `\u003cField /\u003e` proxy components used above.\n\n#### Overriding the default field component\n```js\n// as long as a component takes a `value` prop (and ideally a `label` prop)\n// and an `onChange` callback prop, it can be used as a react-form-for field\nvar Input = require('react-bootstrap/Input')\nvar {Form, Fields, Field} = require('react-form-for')\n\nvar ExampleForm = React.createClass({\n  handleChange: function(updatedValue) {\n    this.setState({value: updatedValue})\n  },\n  // the checkbox Field gets an Input component with different layout classes\n  getCheckboxComponent: function() {\n    return (\n      \u003cInput type=\"checkbox\" wrapperClassName=\"col-xs-offset-2 col-xs-10\"/\u003e\n    )\n  },\n  render: function() {\n    var formOpts = {\n      onChange: this.handleChange,\n      fieldComponent: (\n        \u003cInput labelClassName=\"col-xs-2\" wrapperClassName=\"col-xs-10\" /\u003e\n      )\n    }\n      // all of these fields will be rendered as a react-bootstrap/Input\n      \u003cForm for={this.state.value} {...formOpts} className=\"form-horizontal\"\u003e\n        \u003cField for=\"name\" /\u003e\n        \u003cField for=\"active\" component={this.getCheckboxComponent()} /\u003e\n        \u003cFields for=\"financial_stuff\"\n          \u003cField for=\"account_balance\" addonBefore=\"$\" /\u003e\n        \u003c/Fields\u003e\n      \u003c/Form\u003e\n    )\n  }\n})\n```\n\n##### Warning\n:warning: This module is pretty new and might have some bugs, please [file an issue](https://github.com/jsdf/react-form-for/issues)\nif you encounter any problems.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdf%2Freact-form-for","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdf%2Freact-form-for","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdf%2Freact-form-for/lists"}