{"id":16349502,"url":"https://github.com/arojunior/redux-form-field-wrapper","last_synced_at":"2026-05-07T11:31:25.085Z","repository":{"id":57350747,"uuid":"88907353","full_name":"arojunior/redux-form-field-wrapper","owner":"arojunior","description":"Redux-form fields wrapper","archived":false,"fork":false,"pushed_at":"2017-05-30T19:49:53.000Z","size":113,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-13T23:01:53.336Z","etag":null,"topics":["javascript","react","redux","redux-form"],"latest_commit_sha":null,"homepage":null,"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/arojunior.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":"2017-04-20T20:23:58.000Z","updated_at":"2017-05-10T20:08:50.000Z","dependencies_parsed_at":"2022-09-15T01:53:39.226Z","dependency_job_id":null,"html_url":"https://github.com/arojunior/redux-form-field-wrapper","commit_stats":null,"previous_names":["arojunior/redux-form-field"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arojunior%2Fredux-form-field-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arojunior%2Fredux-form-field-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arojunior%2Fredux-form-field-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arojunior%2Fredux-form-field-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arojunior","download_url":"https://codeload.github.com/arojunior/redux-form-field-wrapper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239590168,"owners_count":19664430,"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":["javascript","react","redux","redux-form"],"created_at":"2024-10-11T01:00:03.325Z","updated_at":"2025-11-11T14:30:11.592Z","avatar_url":"https://github.com/arojunior.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Redux-form Field Renderer\n\n### Install\n```shell\nnpm install redux-form-field-wrapper --save\n```\n\n### Usage\n```javascript\nimport React from 'react'\nimport {Field, reduxForm} from 'redux-form'\nimport renderField from 'redux-form-field-wrapper'\n\nconst defaultConfig = {\n  divClass: 'form-group',\n  inputClass: 'col-md-10',\n  labelClass: 'col-md-2',\n  component: renderField\n}\n\nconst Form = props =\u003e {\n  const {handleSubmit, pristine, invalid, reset, submitting} = props\n  return (\n    \u003cform onSubmit={handleSubmit} className=\"form-horizontal\"\u003e\n      \u003cField\n        name=\"name\"\n        type=\"text\"\n        placeholder=\"Name\"\n        label=\"Name\"\n        {...defaultConfig}\n      /\u003e\n      \u003cField\n        name=\"email\"\n        type=\"email\"\n        placeholder=\"Username / E-mail\"\n        label=\"E-mail\"\n        {...defaultConfig}\n      /\u003e\n      \u003cbutton\n        type=\"submit\"\n        className=\"btn btn-primary\"\n        disabled={pristine || submitting || invalid}\u003e\n        Send\n      \u003c/button\u003e      \n    \u003c/form\u003e      \n    )\n}\n\nexport default reduxForm({\n  form: 'myForm'\n})(Form)\n```\n\n### Output\n\n```html\n\u003cform class=\"form-horizontal\"\u003e\n\u003cdiv class=\"form-group\"\u003e\n  \u003cdiv class=\"col-md-2\"\u003e\n    \u003clabel\u003eName\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"col-md-10\"\u003e\n    \u003cinput type=\"text\" name=\"name\" placeholder=\"Name\" class=\"form-control\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"form-group\"\u003e\n  \u003cdiv class=\"col-md-2\"\u003e\n    \u003clabel\u003eE-mail\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"col-md-10\"\u003e\n    \u003cinput type=\"email\" name=\"email\" placeholder=\"E-mail\" class=\"form-control\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/form\u003e\n```\n\n### What about validation?\n\nJust add your own validation method and populate errors in case of fail\n\n```javascript\nconst validate = values =\u003e {\n  const errors = {}\n  if ( ! checkUsername(values.email)) {\n    errors.email = 'Sorry, Dude. This username is already in use'\n  }\n  return errors\n}\n\nexport default reduxForm({\n  form: 'myForm',\n  validate\n})(Form)\n```\n\n### Need something easier?\n\n```javascript\nimport renderField, {email} from 'redux-form-field-wrapper'\n\n// ...Code\n\u003cField\n  name=\"email\"\n  type=\"email\"\n  placeholder=\"E-mail\"\n  label=\"E-mail\"\n  validate={email}\n  {...defaultConfig}\n/\u003e\n// ...Code\n\nexport default reduxForm({\n  form: 'myForm'\n})(Form)\n// Obs: Don't need validate property\n```\n\n***Validation methods available:***\n\n* required\n* maxLength\n* number\n* minValue\n* email\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farojunior%2Fredux-form-field-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farojunior%2Fredux-form-field-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farojunior%2Fredux-form-field-wrapper/lists"}