{"id":13461536,"url":"https://github.com/guilouro/formcat","last_synced_at":"2026-03-11T00:42:37.913Z","repository":{"id":34880939,"uuid":"184264549","full_name":"guilouro/formcat","owner":"guilouro","description":"A simple and easy way to control forms in React using the React Context API","archived":false,"fork":false,"pushed_at":"2023-01-06T01:50:17.000Z","size":3224,"stargazers_count":114,"open_issues_count":25,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-20T08:18:47.392Z","etag":null,"topics":["context","context-api","form","react","react-hooks"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/guilouro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-30T13:12:31.000Z","updated_at":"2023-12-26T13:32:44.000Z","dependencies_parsed_at":"2023-01-15T10:00:51.501Z","dependency_job_id":null,"html_url":"https://github.com/guilouro/formcat","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilouro%2Fformcat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilouro%2Fformcat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilouro%2Fformcat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilouro%2Fformcat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guilouro","download_url":"https://codeload.github.com/guilouro/formcat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245366197,"owners_count":20603438,"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":["context","context-api","form","react","react-hooks"],"created_at":"2024-07-31T11:00:42.719Z","updated_at":"2026-03-11T00:42:32.859Z","avatar_url":"https://github.com/guilouro.png","language":"JavaScript","funding_links":[],"categories":["Code Design"],"sub_categories":["Form Logic"],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"./logo.jpg\" width=\"550px\"/\u003e\u003c/p\u003e\n\nA simple and easy way to control forms in React using the [React Context API](https://reactjs.org/docs/context.html)\n\n\n![CI](https://github.com/guilouro/formcat/workflows/CI/badge.svg)\n[![codecov.io](https://codecov.io/gh/guilouro/formcat/branch/master/graph/badge.svg)](https://codecov.io/gh/guilouro/formcat)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n## Getting Started\n\n## Install\n\nWith npm\n\n```\nnpm install --save formcat\n```\n\nWith yarn\n\n```\nyarn add formcat\n```\n\n## How to use\n\nFirst of all, we need to create a Field using the [HOC](https://facebook.github.io/react/docs/higher-order-components.html) `withContextForm` as the example below:\n\n```js\n/* InputField.js */\n\nimport { withContextForm } from 'formcat'\n\nconst InputField = ({ error, ...input }) =\u003e (\n  \u003cinput {...input} /\u003e\n)\n\nexport default withContextForm(InputField)\n```\n\nNow we can use this component inside the Form:\n\n```js\nimport { Form } from 'formcat'\nimport InputField from './InputField'\n\nfunction Main () {\n  return (\n    \u003cForm\u003e\n      \u003cInputField name=\"whatever\" /\u003e\n    \u003c/Form\u003e\n  )\n}\n```\n\n# API\n\n### Form\n\n| Props | Type | Default value | Description |\n| ----- | ---- | ------------- | ----------- |\n| **keyUpValidation** | Boolean | `false` | When `true` the validations Field works with `keyUp` |\n| **clearAfterSubmit** | Boolean | `false` | When `true` the form will be reset after submit |\n| **onFormChange** | Function | `undefined` | A callback that returns an object with `name`, `type` and `value`\u003cbr\u003e of the current change.  |\n| **onSubmit** | Function | `undefined` | A callback that returns an object with status and values.  |\n\n### Submit\n\nFor an easy `submit` process we can use the HOC `withSubmit` and create a Button that will be controlled by Form, or using the Submit component that already exists.\n\n```js\n// Creating\nimport { withSubmit } from 'formcat'\n\nconst Submit = withSubmit(props =\u003e \u003cbutton {...props} /\u003e)\n\n//or\n\nimport { Submit } from 'formcat'\n\n// Using\n\n...\n  render (\n    \u003cForm\u003e\n      ...\n      \u003cSubmit\u003e Button Text \u003c/Submit\u003e\n    \u003c/Form\u003e\n  )\n...\n```\n\n*Obs: This `button` will be enabled when Form is valid and disabled when is not valid*\n\n\n### Custom Field\n\nIt's a field created with `withContextForm`.\n\n| Props | Type | Default value | Description |\n| ----- | ---- | ------------- | ----------- |\n| **error** | Boolean | `false` | A flag that controls the field validation |\n| **validations** | Array | `[]` | A list with functions validation |\n| **required** | Boolean | `false` | Set required validation for this field |\n| **defaultValue** | String | `\"\"` | Set initial text value |\n| **defaultChecked** | String | `\"\"` | Set initial checked for field |\n\n## Using validations\n\nWe can use many validations per field using the props `validations`. All we need to do is create a pure function that returns `true` or `false` following the example below:\n\n```js\nimport { Form, withFormContext } from 'formcat'\n\nconst Field = withFormContext(({ error, ...input }) =\u003e (\n  \u003cinput {...input} /\u003e\n))\n\n\nconst Main = () =\u003e {\n\n  // Validate if username is @guilouro\n  const usernameValidation = value =\u003e (\n    value === '@guilouro'\n  )\n\n  return (\n    \u003cForm\u003e\n      \u003cField\n        name=\"username\"\n        validations={[usernameValidation]}\n      /\u003e\n    \u003c/Form\u003e\n  )\n}\n```\n\nA validation function has two params `value` and `state`:\n\n```js\nfunction validationName (value, state) {}\n```\n\n| Param | Type | Description |\n| ----- | ---- | ------------- |\n| **value** | String  | Current field value |\n| **state** | Object  | An object with all fields value |\n\n### Set values\n\nWe can set values out of Form using `Ref` and `updateFieldValue` as the example below:\n\n| Param | Type | Description |\n| ----- | ---- | ------------- |\n| **name** | String | `null`  | Field name |\n| **text** | String  | A new value for this field |\n\n```js\nimport { Form, withFormContext } from 'formcat'\n\nconst Field = withFormContext(({ error, ...input }) =\u003e {}(\n  \u003cinput {...input} /\u003e\n))\n\n\nconst Main = () =\u003e {\n  const form = useRef(null)\n\n  const setValue = () =\u003e {\n    form.current.updateFieldValue('username', '@guilouro')\n  }\n\n  return (\n    \u003c\u003e\n      \u003cForm ref={ref}\u003e\n        \u003cField name=\"username\" /\u003e\n      \u003c/Form\u003e\n\n      \u003cbutton onClick={setValue}\u003e\n        Set @guilouro as value\n      \u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n\n```\n\n## Fields we can use\n\nThere are some simple field created with `withContexForm` we can use in project or use as a reference for create a new custon field\n\n### InputField\n\nA simple `input` field\n\n```js\nimport { InputField } from 'formcat/fields'\n\n...\n\u003cInputField\n  label=\"My Input\"\n  name=\"my-select\"\n/\u003e\n...\n```\n\n| Param | Type | Default value | Description |\n| ----- | ---- | ------------- | --------------|\n| **name** | String | `null`  | Field name |\n| **label** | String  | `''` | A label for this field |\n| **type** | String  | `text` | A type for this input |\n\n*Obs: And all common props*\n\n### CheckboxField\n\nA `input` `checkbox` field\n\n```js\nimport { CheckboxField } from 'formcat/fields'\n\n...\n\u003cCheckboxField\n  label=\"My Input\"\n  name=\"my-select\"\n/\u003e\n...\n```\n\n| Param | Type | Default value | Description |\n| ----- | ---- | ------------- | --------------|\n| **name** | String | `null`  | Field name |\n| **label** | String  | `''` | A label for this field |\n| **defaultChecked** | Boolean  | `false` | A flag to define the initial status |\n\n*Obs: And all common props*\n\n### RadiosField\n\nA simple `input` `radio` field\n\n```js\nimport { RadiosField } from 'formcat/fields'\n\n...\n\u003cRadiosField\n  label=\"My Select\"\n  name=\"my-select\"\n  options={[\n    { label: 'Item 1', value: 1 },\n    { label: 'Item 2', value: 2, checked: true }\n  ]}\n/\u003e\n...\n```\n\n| Param | Type | Default value | Description |\n| ----- | ---- | ------------- | --------------|\n| **name** | String | `null`  | Field name |\n| **label** | String  | `''` | A label for this field |\n| **options** | Array  | `[]` | A list of objects with `label`, `value` and `checked` |\n\n*Obs: And all common props*\n\n\n### SelectField\n\nA simple `select` field\n\n```js\nimport { SelectField } from 'formcat/fields'\n\n...\n\u003cSelectField\n  label=\"My Select\"\n  name=\"my-select\"\n  options={[\n    { label: 'Item 1', value: 1 }\n  ]}\n/\u003e\n...\n```\n\n| Param | Type | Default value | Description |\n| ----- | ---- | ------------- | --------------|\n| **name** | String | `null`  | Field name |\n| **label** | String  | `''` | A label for this field |\n| **options** | Array  | `[]` | A list of objects with `label` and `value` |\n\n*Obs: And all common props*\n\n### TextField\n\nA simple `textarea` field\n\n```js\nimport { TextareaField } from 'formcat/fields'\n\n...\n\u003cTextareaField\n  label=\"My Text\"\n  name=\"my-text\"\n/\u003e\n...\n```\n\n| Param | Type | Default value | Description |\n| ----- | ---- | ------------- | --------------|\n| **name** | String | `null`  | Field name |\n| **label** | String  | `''` | A label for this field |\n\n*Obs: And all common props*\n\n### Error styles\n\nInvalid fields will receive a class: `className=\"formcat-error\"`\n\n\n## Examples\n\n### Full form\n\nA example with all fields, validation and a populate button\n\n[![Edit Formcat](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/93465kmow?fontsize=14)\n\n### Creating a custom fields\n\nA example of the how create a custom field\n\n[![Edit Creating custom fields](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/3rpxomlm15?fontsize=14)\n\n---\n\n## Contributing\n\nIf you want to contribute with this component:\n[Contributing Documentation](https://github.com/guilouro/formcat/blob/master/.github/CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguilouro%2Fformcat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguilouro%2Fformcat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguilouro%2Fformcat/lists"}