{"id":17576828,"url":"https://github.com/davidkpiano/rrf-docs","last_synced_at":"2025-03-29T16:25:15.426Z","repository":{"id":146162904,"uuid":"57045499","full_name":"davidkpiano/rrf-docs","owner":"davidkpiano","description":null,"archived":false,"fork":false,"pushed_at":"2016-05-29T21:36:52.000Z","size":81,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-04T17:21:01.109Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/davidkpiano.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-04-25T13:50:32.000Z","updated_at":"2021-06-16T03:52:32.000Z","dependencies_parsed_at":"2023-03-30T08:23:04.044Z","dependency_job_id":null,"html_url":"https://github.com/davidkpiano/rrf-docs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidkpiano%2Frrf-docs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidkpiano%2Frrf-docs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidkpiano%2Frrf-docs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidkpiano%2Frrf-docs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidkpiano","download_url":"https://codeload.github.com/davidkpiano/rrf-docs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246209880,"owners_count":20741077,"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-21T23:43:20.996Z","updated_at":"2025-03-29T16:25:15.400Z","avatar_url":"https://github.com/davidkpiano.png","language":"CSS","readme":"\u003ch1 id=\"react-redux-form\"\u003e\u003cspan\u003ereact\u003c/span\u003e \u003cspan\u003eredux\u003c/span\u003e \u003cspan\u003eform\u003c/span\u003e\u003c/h1\u003e\n\n\u003ciframe src=\"https://ghbtns.com/github-btn.html?user=davidkpiano\u0026repo=react-redux-form\u0026type=star\u0026count=true\" frameborder=\"0\" scrolling=\"0\" width=\"100px\" height=\"20px\"\u003e\u003c/iframe\u003e\n\u003ciframe src=\"https://ghbtns.com/github-btn.html?user=davidkpiano\u0026repo=react-redux-form\u0026type=fork\u0026count=true\" frameborder=\"0\" scrolling=\"0\" width=\"100px\" height=\"20px\"\u003e\u003c/iframe\u003e\n\nReact Redux Form is **a collection of action creators and reducer creators** that makes building complex and custom forms with React and Redux simple.\n\n**If you know React and Redux, you know React-Redux-Form.**\n\nIt also provides the helpful `\u003cField model=\"...\" /\u003e` component for mapping controls to form and model changes quickly.\n\nInstead of answering \"How would I do this with this library?\", React Redux Form answers \"How would I do this in Redux?\", and provides a thin layer to help abstract the pain points of creating complex, dynamic forms with Redux and React.\n\n\n```js\nimport { Field } from 'react-redux-form';\n\n// in your component's render() method\n\u003cField model=\"user.name\"\u003e\n  \u003cinput type=\"text\" /\u003e\n\u003c/Field\u003e\n```\n\nReact Redux Form:\n\n- handles model value changes for _any_ object/array\n- provides utility actions for manipulating state\n- handles control updates, such as focus, blur, pristine, etc.\n- keeps track of validity on _any part_ of your model\n- allows for completely dynamic and deep forms\n- **keeps your model state intact**, which allows you to have full control of your model reducer\n\nUseful Components:\n- [`\u003cForm\u003e`](https://davidkpiano.gitbooks.io/react-redux-form/content/form_component.html)\n- [`\u003cField\u003e`](https://davidkpiano.gitbooks.io/react-redux-form/content/field_component.html)\n- [`\u003cErrors\u003e`](https://davidkpiano.gitbooks.io/react-redux-form/content/errors_component.html)\n\n**Getting Started**\n\n1. Install the prerequisites:\n  - `npm install react redux react-redux --save`\n  - (recommended) `npm install redux-thunk --save`\n1. `npm install react-redux-form --save`\n\n**Full Example**\n\n```js\n// app.js\n\nimport React from 'react';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider } from 'react-redux';\nimport { modelReducer, formReducer } from 'react-redux-form';\n\nimport LoginForm from './forms/login-form';\n\nconst store = createStore(combineReducers({\n  user: modelReducer('user'),\n  userForm: formReducer('user')\n}));\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cProvider store={ store }\u003e\n        \u003cLoginForm /\u003e\n      \u003c/Provider\u003e\n    )\n  }\n}\n```\n\n```js\n// forms/login-form.js\n\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { Field } from 'react-redux-form';\n\nclass LoginForm extends React.Component {\n  render() {\n    let { user } = this.props;\n\n    return (\n      \u003cform\u003e\n        \u003cField model=\"user.username\"\u003e\n          \u003clabel\u003eUsername\u003c/label\u003e\n          \u003cinput type=\"text\" /\u003e\n        \u003c/Field\u003e\n\n        \u003cField model=\"user.password\"\u003e\n          \u003clabel\u003ePassword\u003c/label\u003e\n          \u003cinput type=\"password\" /\u003e\n        \u003c/Field\u003e\n\n        \u003cbutton\u003e\n          Log in as { user.username }\n        \u003c/button\u003e\n      \u003c/form\u003e\n    )\n  }\n}\n\nconst selector = (state) =\u003e ({ user: state.user });\n\nexport default connect(selector)(LoginForm);\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidkpiano%2Frrf-docs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidkpiano%2Frrf-docs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidkpiano%2Frrf-docs/lists"}