{"id":13499693,"url":"https://github.com/prometheusresearch-archive/react-forms","last_synced_at":"2025-12-16T15:02:03.106Z","repository":{"id":16247082,"uuid":"18994902","full_name":"prometheusresearch-archive/react-forms","owner":"prometheusresearch-archive","description":"Forms library for React.","archived":false,"fork":false,"pushed_at":"2017-11-01T12:02:13.000Z","size":2565,"stargazers_count":1158,"open_issues_count":28,"forks_count":111,"subscribers_count":22,"default_branch":"develop","last_synced_at":"2025-11-18T03:03:23.455Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prometheusresearch-archive.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-04-21T14:30:54.000Z","updated_at":"2025-10-12T16:48:10.000Z","dependencies_parsed_at":"2022-09-14T09:10:43.773Z","dependency_job_id":null,"html_url":"https://github.com/prometheusresearch-archive/react-forms","commit_stats":null,"previous_names":["prometheusresearch/react-forms"],"tags_count":61,"template":false,"template_full_name":null,"purl":"pkg:github/prometheusresearch-archive/react-forms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prometheusresearch-archive%2Freact-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prometheusresearch-archive%2Freact-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prometheusresearch-archive%2Freact-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prometheusresearch-archive%2Freact-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prometheusresearch-archive","download_url":"https://codeload.github.com/prometheusresearch-archive/react-forms/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prometheusresearch-archive%2Freact-forms/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27766795,"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","status":"online","status_checked_at":"2025-12-16T02:00:10.477Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-07-31T22:00:38.555Z","updated_at":"2025-12-16T15:02:03.081Z","avatar_url":"https://github.com/prometheusresearch-archive.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript"],"sub_categories":["Uncategorized"],"readme":"# React Forms\n\n[![Travis build status](https://img.shields.io/travis/prometheusresearch/react-forms/develop.svg)](https://travis-ci.org/prometheusresearch/react-forms) [![Coverage](https://img.shields.io/coveralls/prometheusresearch/react-forms/develop.svg)](https://coveralls.io/github/prometheusresearch/react-forms)\n\nReact Forms library provides a set of tools for [React][] to handle form\nrendering and validation.\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n**Table of Contents**\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Validation](#validation)\n  - [API Reference](#api-reference)\n    - [`\u003cField /\u003e`](#field-)\n    - [`\u003cFieldset /\u003e`](#fieldset-)\n    - [`createValue({schema, value, onChange})`](#createvalueschema-value-onchange)\n    - [`WithFormValue(Component)`](#withformvaluecomponent)\n  - [Howto Guides](#howto-guides)\n    - [Customizing form fields](#customizing-form-fields)\n    - [Pattern for reusable forms](#pattern-for-reusable-forms)\n- [Examples](#examples)\n- [Credits](#credits)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\nTo use version documented here you need to install `beta` tag from npm:\n\n    % npm install react-forms@beta\n\nYou would probably also need a module bundler such as [Browserify][] or\n[Webpack][] as React Forms is distributed as a set of CommonJS modules.\n\n## Usage\n\nReact Forms doesn't provide any `\u003cForm /\u003e` component, instead it makes\nimplementing form components an easy task.\n\nNote that examples are written using ES2015 syntax. You would probably use\n[Babel][] with `es2015` and `react` presets enabled to compile code to ES5 which\nis compatible with most of the current runtimes.\n\n### Basic form component.\n\nThis is the example where form value is managed as a part of local component\nstate. Some might put form value in a Flux/Redux store instead.\n\n```js\nimport React from 'react'\nimport {Fieldset, Field, createValue} from 'react-forms'\n\nclass Form extends React.Component {\n\n  constructor(props) {\n    super(props)\n    let formValue = createValue({\n      value: props.value,\n      onChange: this.onChange.bind(this)\n    })\n    this.state = {formValue}\n  }\n\n  onChange(formValue) {\n    this.setState({formValue})\n  }\n\n  render() {\n    return (\n      \u003cFieldset formValue={this.state.formValue}\u003e\n        \u003cField select=\"firstName\" label=\"First name\" /\u003e\n        \u003cField select=\"lastName\" label=\"Last name\" /\u003e\n      \u003c/Fieldset\u003e\n    )\n  }\n}\n```\n\nThen you can use `\u003cForm /\u003e` component like any regular React component:\n\n```js\nimport {render} from 'react-dom'\n\nrender(\n  \u003cForm value={{firstName: 'Michael', lastName: 'Jackson'}} /\u003e,\n  document.getElementById('form')\n)\n```\n\n### Validation\n\nReact Forms can validate form value using [JSON schema][]:\n\n```js\nlet schema = {\n  type: 'object',\n  properties: {\n    firstName: {type: 'string'},\n    lastName: {type: 'string'}\n  }\n}\n```\n\nSimply pass it to a `createValue(..)` function:\n\n```js\nlet formValue = createValue({value, onChange, schema})\n```\n\n### API Reference\n\n#### `\u003cField /\u003e`\n\n#### `\u003cFieldset /\u003e`\n\n#### `createValue({schema, value, onChange})`\n\n#### `WithFormValue(Component)`\n\n### Howto Guides\n\n#### Customizing form fields\n\nAll components in React Forms conform to [React Stylesheet][] API. That means\nthat for injecting customization one needs `react-stylesheet` package to be\ninstalled:\n\n    % npm install react-stylesheet\n\nCustomizing label rendering:\n\n```js\nimport React from 'react'\nimport {style} from 'react-stylesheet'\nimport {Field as BaseField, Label as BaseLabel} from 'react-forms'\n\nfunction Label({label, schema}) {\n  return \u003cBaseLabel className=\"my-label\" label={label} schema={schema} /\u003e\n}\n\nlet Field = style(BaseField, {\n  Label: Label\n})\n```\n\nCustomizing error list rendering:\n\n```js\nimport React from 'react'\nimport {style} from 'react-stylesheet'\nimport {Field as BaseField, ErrorList as BaseErrorList} from 'react-forms'\n\nfunction ErrorList({formValue}) {\n  return \u003cBaseErrorList className=\"my-error-list\" formValue={formValue} /\u003e\n}\n\nlet Field = style(BaseField, {\n  ErrorList: ErrorList\n})\n```\n\nForm field with custom input component:\n\n```js\nimport React from 'react'\nimport {Field} from 'react-forms'\nimport Datepicker from 'datepicker'\n\nfunction DateField(props) {\n  return \u003cField {...props} Input={Datepicker} /\u003e\n}\n```\n\nImplementing form field component from scratch:\n\n```js\nimport React from 'react'\nimport {WithFormValue} from 'react-forms'\n\nclass Field extends React.Component {\n\n  render() {\n    let {formValue} = this.props\n    return (\n      \u003cdiv\u003e\n        \u003clabel\u003e{formValue.schema.label}\u003c/label\u003e\n        \u003cinput value={formValue.value} onChange={this.onChange} /\u003e\n      \u003c/div\u003e\n    )\n  }\n\n  onChange = (e) =\u003e this.props.formValue.update(e.target.value)\n}\n\nField = WithFormValue(Field);\n```\n\n#### Pattern for reusable forms\n\n```js\nimport React from 'react'\nimport {Fieldset} from 'react-forms'\n\nclass IndividualFieldset extends React.Component {\n\n  static schema = {\n    type: 'object',\n    properties: {\n      firstName: {type: 'string'},\n      lastName: {type: 'string'}\n    }\n  }\n\n  static value = {\n    firstName: 'John',\n    lastName: 'Doe'\n  }\n\n  render() {\n    let {label, ...props} = this.props\n    return (\n      \u003cFieldset {...props}\u003e\n        \u003clabel\u003e{label}\u003c/label\u003e\n        \u003cField\n          select=\"firstName\"\n          label=\"First name\"\n          /\u003e\n        \u003cField\n          select=\"lastName\"\n          label=\"Last name\"\n          /\u003e\n      \u003c/Fieldset\u003e\n    )\n  }\n}\n```\n\nLater you can compose schema and initial form value using `IndividualFieldset.schema`\nand `IndividualFieldset.value` static properties and use `\u003cIndividualFieldset /\u003e` component\nitself for rendering.\n\n```js\nlet schema = {\n  type: 'object',\n  properties: {\n    mother: IndividualFieldset.schema,\n    father: IndividualFieldset.schema\n  }\n}\n\nlet value = {\n  mother: IndividualFieldset.value,\n  father: IndividualFieldset.value\n}\n\nclass FamilyForm extends React.Component {\n\n  constructor(props) {\n    super(props)\n    this.state = {formValue: createValue({schema, value, this.onChange})}\n  }\n\n  onChange = (nextFormValue) =\u003e {\n    this.setState({formValue: nextFormValue})\n  }\n\n  render() {\n    return (\n      \u003cFieldset formValue={this.state.formValue}\u003e\n        \u003cIndividualFieldset\n          select=\"mother\"\n          label=\"Mother\"\n          /\u003e\n        \u003cIndividualFieldset\n          select=\"father\"\n          label=\"Father\"\n          /\u003e\n      \u003c/Fieldset\u003e\n    )\n  }\n}\n```\n\n## Examples\n\nExamples are located at `examples` folder. To run.\n\n```js\ncd examples\nnpm install\nnpm start\n```\nopen http://localhost:4000 in browser\n\n## Credits\n\nReact Forms is free software created by [Prometheus Research, LLC][] and is\nreleased under the MIT license.\n\n[React]: http://facebook.github.io/react/\n[React Stylesheet]: https://github.com/prometheusresearch/react-stylesheet\n[Prometheus Research, LLC]: http://prometheusresearch.com\n[JSON schema]: http://json-schema.org/documentation.html\n[Browserify]: http://browserify.org/\n[Webpack]: https://webpack.github.io/docs/\n[Babel]: http://babeljs.io/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprometheusresearch-archive%2Freact-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprometheusresearch-archive%2Freact-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprometheusresearch-archive%2Freact-forms/lists"}