{"id":15013330,"url":"https://github.com/nicolaslopezj/simple-react-form","last_synced_at":"2025-04-04T17:04:32.228Z","repository":{"id":6138320,"uuid":"54407694","full_name":"nicolaslopezj/simple-react-form","owner":"nicolaslopezj","description":"The simplest way to handle forms in React","archived":false,"fork":false,"pushed_at":"2024-07-24T12:51:36.000Z","size":12532,"stargazers_count":230,"open_issues_count":4,"forks_count":38,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-28T16:08:20.731Z","etag":null,"topics":["form","meteor","react","react-native","schemas"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/simple-react-form","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicolaslopezj.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-21T17:03:07.000Z","updated_at":"2025-03-22T23:39:48.000Z","dependencies_parsed_at":"2024-01-17T17:11:25.076Z","dependency_job_id":"88f4b82d-4072-41dd-8f45-985fd4617596","html_url":"https://github.com/nicolaslopezj/simple-react-form","commit_stats":{"total_commits":340,"total_committers":13,"mean_commits":"26.153846153846153","dds":"0.17647058823529416","last_synced_commit":"d57e1b186af6189c42120b88b30e3a16af50be19"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolaslopezj%2Fsimple-react-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolaslopezj%2Fsimple-react-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolaslopezj%2Fsimple-react-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolaslopezj%2Fsimple-react-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicolaslopezj","download_url":"https://codeload.github.com/nicolaslopezj/simple-react-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246811280,"owners_count":20837748,"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":["form","meteor","react","react-native","schemas"],"created_at":"2024-09-24T19:44:06.332Z","updated_at":"2025-04-04T17:04:32.205Z","avatar_url":"https://github.com/nicolaslopezj.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple React Form\n\n[![travis-ci](https://travis-ci.org/nicolaslopezj/simple-react-form.svg?branch=master)](https://travis-ci.org/nicolaslopezj/simple-react-form)\n[![npm version](https://badge.fury.io/js/simple-react-form.svg)](https://badge.fury.io/js/simple-react-form)\n\nSimple React Form is the simplest way to handle forms in React. It helps you make reusable form components in **React** and [React Native](#react-native).\n\nThis is just a framework, you must [create the form components](#field-types) or [install a package with fields](#contributions) that you will use.\n\nTo use with react native [check here](#react-native)\n\n### Installation\n\nInstall the base package\n\n```sh\nnpm install --save simple-react-form\n```\n\n### Example\n\n```js\nimport React from 'react'\nimport {Form, Field} from 'simple-react-form'\nimport DatePicker from './myFields/DatePicker'\nimport Text from './myFields/Text'\n\nclass PostsCreate extends React.Component {\n  state = {}\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cForm state={this.state} onChange={state =\u003e this.setState(state)}\u003e\n          \u003cField fieldName=\"name\" label=\"Name\" type={Text} /\u003e\n          \u003cField fieldName=\"date\" label=\"A Date\" type={DatePicker} /\u003e\n        \u003c/Form\u003e\n        \u003cp\u003eMy name is {this.state.name}\u003c/p\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n## Contributions\n\n- [simple-react-form-material-ui](https://github.com/nicolaslopezj/simple-react-form-material-ui) Material UI set of fields.\n- [simple-react-form-bootstrap](https://github.com/fermuch/simple-react-form-bootstrap) Bootstrap set of fields.\n\n# Docs\n\n## Using with state\n\nIn this example, the current value of the form will be stored in `this.state`\n\n```js\nimport React from 'react'\nimport {Form, Field} from 'simple-react-form'\nimport DatePicker from './myFields/DatePicker'\nimport Text from './myFields/Text'\n\nclass PostsCreate extends React.Component {\n  state = {}\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cForm state={this.state} onChange={state =\u003e this.setState(state)}\u003e\n          \u003cField fieldName=\"name\" label=\"Name\" type={Text} /\u003e\n          \u003cField fieldName=\"date\" label=\"A Date\" type={DatePicker} /\u003e\n        \u003c/Form\u003e\n        \u003cp\u003eMy name is {this.state.name}\u003c/p\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n## Using without state\n\nIn this example, the current value of the form will be stored inside the Form component and passed in the onSubmit function. The difference on this is that the `state` prop does not change over time.\n\n```js\nimport React from 'react'\nimport {Form, Field} from 'simple-react-form'\nimport DatePicker from './myFields/DatePicker'\nimport Text from './myFields/Text'\n\nclass PostsCreate extends React.Component {\n  state = {}\n\n  onSubmit({name, date}) {}\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cForm ref=\"form\" state={this.props.initialDoc} onSubmit={this.onSubmit}\u003e\n          \u003cField fieldName=\"name\" label=\"Name\" type={Text} /\u003e\n          \u003cField fieldName=\"date\" label=\"A Date\" type={DatePicker} /\u003e\n        \u003c/Form\u003e\n        \u003cbutton onClick={() =\u003e this.refs.form.submit()}\u003eSubmit\u003c/button\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n## Field Types\n\nReact Simple Form is built from the idea that you can create custom components easily.\n\nBasically this consist in a component that have the prop `value` and the prop `onChange`.\nYou must render the `value` and call `onChange` passing the new value\nwhen the value has changed.\n\n```js\nimport UploadImage from '../components/my-fields/upload'\n\n\u003cField fieldName='picture' type={UploadImage} squareOnly={true}/\u003e\n```\n\n### Creating the field type\n\nYou must create a React component.\n\n```js\nimport React from 'react'\n\nexport default class UploadImage extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003e{this.props.label}\u003c/p\u003e\n        \u003cdiv\u003e\n          \u003cimg src={this.props.value} /\u003e\n        \u003c/div\u003e\n        \u003cTextField\n          value={this.props.value}\n          hintText=\"Image Url\"\n          onChange={event =\u003e this.props.onChange(event.target.value)}\n        /\u003e\n        \u003cp\u003e{this.props.errorMessage}\u003c/p\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\nYou can view the full list of props [here](https://github.com/nicolaslopezj/simple-react-form/blob/master/src/FieldType.js#L4).\n\n## React Native\n\nWith React Native the api is the same, but you must enclose the inner content of the form with a `View` component.\n\nExample:\n\n```js\nimport React from 'react'\nimport {View, TextInput} from 'react-native'\n\nexport default class TextFieldComponent extends React.Component {\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cTextInput\n          style={{height: 40, borderColor: 'gray', borderWidth: 1}}\n          onChangeText={this.props.onChange}\n          value={this.props.value}\n        /\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\nRender the form in the component you want\n\n```js\nimport Text from '../components/my-fields/text'\n\n\u003cForm state={this.state} onChange={changes =\u003e this.setState(changes)}\u003e\n  \u003cView\u003e\n    \u003cField fieldName='email' type={Text}/\u003e\n    \u003cField fieldName='password' type={Text}/\u003e\n  \u003c/View\u003e\n\u003c/Form\u003e\n```\n\n\u003e You should always render your fields inside a View when using react native.\n\n### WithValue High order component\n\nIf you need to get the current value of the form in the children you can use the `WithValue` component\n\n```js\nimport React from 'react'\nimport {Form, Field, WithValue} from 'simple-react-form'\n\nexport default class Example extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cForm\u003e\n          \u003cWithValue\u003e\n            {value =\u003e (\n              \u003cdiv\u003e\n                \u003cp\u003eThe name is {value.name}\u003c/p\u003e\n                \u003cField fieldName=\"name\" label=\"Name\" type={Text} /\u003e\n              \u003c/div\u003e\n            )}\n          \u003c/WithValue\u003e\n        \u003c/Form\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n## Contributors\n\n- [@nicolaslopezj](http://github.com/nicolaslopezj)\n- [@fermuch](http://github.com/fermuch)\n- [@joadr](http://github.com/joadr)\n- [@prinzdezibel](http://github.com/prinzdezibel)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolaslopezj%2Fsimple-react-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicolaslopezj%2Fsimple-react-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolaslopezj%2Fsimple-react-form/lists"}