{"id":13401107,"url":"https://github.com/formsy/formsy-react","last_synced_at":"2025-05-14T19:08:42.791Z","repository":{"id":39737680,"uuid":"110046792","full_name":"formsy/formsy-react","owner":"formsy","description":"A form input builder and validator for React JS","archived":false,"fork":false,"pushed_at":"2024-09-01T17:20:22.000Z","size":6501,"stargazers_count":763,"open_issues_count":39,"forks_count":124,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-05-06T05:43:34.258Z","etag":null,"topics":["form","form-validation","formsy","react","validation"],"latest_commit_sha":null,"homepage":null,"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/formsy.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":"2017-11-09T00:30:50.000Z","updated_at":"2025-05-01T11:30:18.000Z","dependencies_parsed_at":"2024-06-14T11:41:52.592Z","dependency_job_id":"ccb371f4-5df5-4e6f-b6b3-1856b1d4b072","html_url":"https://github.com/formsy/formsy-react","commit_stats":{"total_commits":474,"total_committers":73,"mean_commits":6.493150684931507,"dds":0.7848101265822784,"last_synced_commit":"57f77738a0267e48c199a823e121d60f640f9f96"},"previous_names":[],"tags_count":76,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formsy%2Fformsy-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formsy%2Fformsy-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formsy%2Fformsy-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formsy%2Fformsy-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/formsy","download_url":"https://codeload.github.com/formsy/formsy-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252869264,"owners_count":21817007,"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","form-validation","formsy","react","validation"],"created_at":"2024-07-30T19:00:58.748Z","updated_at":"2025-05-14T19:08:41.920Z","avatar_url":"https://github.com/formsy.png","language":"TypeScript","readme":"# formsy-react\n\n[![GitHub release](https://img.shields.io/github/release/formsy/formsy-react.svg)](https://github.com/formsy/formsy-react/releases)\n![CI](https://github.com/formsy/formsy-react/workflows/CI/badge.svg)\n[![Coverage Status](https://coveralls.io/repos/github/formsy/formsy-react/badge.svg?branch=master)](https://coveralls.io/github/formsy/formsy-react?branch=master)\n[![GitHub contributors](https://img.shields.io/github/contributors/formsy/formsy-react.svg)](https://github.com/formsy/formsy-react/contributors)\n![Typescript Types included](https://badgen.net/npm/types/tslib)\n\nA form input builder and validator for React.\n\n| [Quick Start](#quick-start) | [API](/API.md) | [1.x API](https://github.com/formsy/formsy-react/blob/v1.x/API.md) |\n| --------------------------- | -------------- | ------------------------------------------------------------------ |\n\n## Background\n\n[christianalfoni](https://github.com/christianalfoni/) wrote an article on forms and validation with React,\n[Nailing that validation with React JS](http://christianalfoni.github.io/javascript/2014/10/22/nailing-that-validation-with-reactjs.html),\nthe result of that was this library.\n\nThe main concept is that forms, inputs, and validation are done very differently across developers and projects. This\nReact component aims to be that “sweet spot” between flexibility and reusability.\n\nThis project was originally located at [christianalfoni/formsy-react](https://github.com/christianalfoni/formsy-react)\nif you're looking for old issues.\n\n## What You Can Do\n\n1.  Build any kind of form element components. Not just traditional inputs, but anything you want, and get that\n    validation for free\n2.  Add validation rules and use them with simple syntax\n3.  Use handlers for different states of your form. (`onSubmit`, `onValid`, etc.)\n4.  Pass external errors to the form to invalidate elements (E.g. a response from a server)\n5.  Dynamically add form elements to your form and they will register/unregister to the form\n\n## Install\n\n`yarn add formsy-react react react-dom` and use with webpack, browserify, etc.\n\n## Formsy component packages\n\n- [twisty/formsy-react-components](https://github.com/twisty/formsy-react-components) - Bootstrap components for a\n  Formsy-React form.\n- [zabute/formsy-semantic-ui-react](https://github.com/zabute/formsy-semantic-ui-react) - Semantic-Ui-React components\n  for a Formsy-React form.\n\n## 1.x to 2.x Upgrade Guide\n\nThe 2.0 release fixed a number of legacy decisions in the Formsy API, mostly a reliance on function props over value\nprops passed down to wrapped components. However, the API changes are minor and listed below.\n\n- `getErrorMessage()` =\u003e `errorMessage`\n- `getErrorMessages()` =\u003e `errorMessages`\n- `getValue()` =\u003e `value`\n- `hasValue()` =\u003e `hasValue`\n- `isFormDisabled():` =\u003e `isFormDisabled`\n- `isFormSubmitted()` =\u003e `isFormSubmitted`\n- `isPristine()` =\u003e `isPristine`\n- `isRequired()` =\u003e `isRequired`\n- `isValid():` =\u003e `isValid`\n- `showError()` =\u003e `showError`\n- `showRequired()` =\u003e `showRequired`\n\n## Quick Start\n\n### 1. Build a Formsy element\n\n```jsx\n// MyInput.js\nimport { withFormsy } from 'formsy-react';\nimport React from 'react';\n\nclass MyInput extends React.Component {\n  constructor(props) {\n    super(props);\n    this.changeValue = this.changeValue.bind(this);\n  }\n\n  changeValue(event) {\n    // setValue() will set the value of the component, which in\n    // turn will validate it and the rest of the form\n    // Important: Don't skip this step. This pattern is required\n    // for Formsy to work.\n    this.props.setValue(event.currentTarget.value);\n  }\n\n  render() {\n    // An error message is passed only if the component is invalid\n    const errorMessage = this.props.errorMessage;\n\n    return (\n      \u003cdiv\u003e\n        \u003cinput onChange={this.changeValue} type=\"text\" value={this.props.value || ''} /\u003e\n        \u003cspan\u003e{errorMessage}\u003c/span\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default withFormsy(MyInput);\n```\n\n`withFormsy` is a [Higher-Order Component](https://facebook.github.io/react/docs/higher-order-components.html) that\nexposes additional props to `MyInput`. See the [API](/API.md#withFormsy) documentation to view a complete list of the\nprops.\n\n### 2. Use your Formsy element\n\n```jsx\nimport Formsy from 'formsy-react';\nimport React from 'react';\nimport MyInput from './MyInput';\n\nexport default class App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.disableButton = this.disableButton.bind(this);\n    this.enableButton = this.enableButton.bind(this);\n    this.state = { canSubmit: false };\n  }\n\n  disableButton() {\n    this.setState({ canSubmit: false });\n  }\n\n  enableButton() {\n    this.setState({ canSubmit: true });\n  }\n\n  submit(model) {\n    fetch('http://example.com/', {\n      method: 'post',\n      body: JSON.stringify(model),\n    });\n  }\n\n  render() {\n    return (\n      \u003cFormsy onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}\u003e\n        \u003cMyInput name=\"email\" validations=\"isEmail\" validationError=\"This is not a valid email\" required /\u003e\n        \u003cbutton type=\"submit\" disabled={!this.state.canSubmit}\u003e\n          Submit\n        \u003c/button\u003e\n      \u003c/Formsy\u003e\n    );\n  }\n}\n```\n\nThis code results in a form with a submit button that will run the `submit` method when the form is submitted with a\nvalid email. The submit button is disabled as long as the input is empty ([required](/API.md#required)) and the value is\nnot an email ([isEmail](/API.md#validators)). On validation error it will show the message: \"This is not a valid email\".\n\n## 3. More\n\nSee the [API](/API.md) for more information.\n\n## Contribute\n\n- Fork repo\n- `yarn`\n- `yarn lint` runs lint checks\n- `yarn test` runs the tests\n- `npm run deploy` build and release formsy\n\n## Changelog\n\nCheck out our [Changelog](https://github.com/formsy/formsy-react/blob/master/CHANGELOG.md) and\n[releases](https://github.com/formsy/formsy-react/releases)\n\n## License\n\n[The MIT License (MIT)](/LICENSE)\n","funding_links":[],"categories":["Uncategorized","UI Components","TypeScript"],"sub_categories":["Uncategorized","Form Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformsy%2Fformsy-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformsy%2Fformsy-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformsy%2Fformsy-react/lists"}