\n\n# [@cat-react](https://github.com/cat-react) / form  [](https://codecov.io/gh/cat-react/form) [](https://badge.fury.io/js/%40cat-react%2Fform)\nA simple yet powerful library which helps creating validated forms in react. This project is inspired by [formsy-react](https://github.com/christianalfoni/formsy-react).\n\n## Installation\n[](https://www.npmjs.com/package/@cat-react/form)\n- Install the dependency `@cat-react/form` \n (e.g. with `yarn add @cat-react/form` or `npm install @cat-react/form --save`)\n- Import the Components with `import {Form, Input} from '@cat-react/form';`\n\n## Getting Started\n| [API Documentation](/docs/api.md) | [Examples](https://cat-react.github.io/form/) |\n|---|---|\n\nAre you looking for a simple way to create validated forms with React?\n\nCongratulations! Your search is over, because **`@cat-react/form`** offers you a simple way to create either frontend- or backend-validated forms. Validations can either be processed synchronous or asynchronous and the state of the form is being refreshed in real time.\n\nTake a look at the examples to find out how to create the form of your desire.\n\n```jsx\n\n```\n\n## Example Custom TextInput\nHere you can see an example of an custom TextInput which shows how you can implement your own Inputs:\n```jsx\nimport React from 'react';\nimport {Input} from '@cat-react/form'\n\n@Input\nexport default class BasicInput extends React.Component {\n onChange(event) {\n this.props.setValue(event.target.value);\n }\n\n getClassName() {\n let className = 'form-control';\n if (!this.props.isPristine()) {\n if (this.props.isValid()) {\n const isWarning = this.props.getMessages().length > 0;\n if (isWarning) {\n className += ' warning';\n }\n } else {\n className += ' error';\n }\n }\n return className;\n }\n\n renderMessages() {\n let messages = [];\n if (!this.props.isPristine()) {\n messages = this.props.getMessages();\n }\n\n if (!messages || messages.length <= 0) {\n return null;\n }\n\n let className = 'errorText';\n if (this.props.isValid()) {\n className = 'warningText';\n }\n\n return
{messages.map((message, i) =>
{message}
)}
;\n }\n\n render() {\n return (\n
\n \n \n {this.renderMessages()}\n
\n );\n }\n}\n```\n\n**Note**: \nYou need the _babel-plugin-transform-decorators_ plugin to use the ``@Input`` decorator. \nIf you don't want or cannot add this plugin to you webpack config you need to use the HOC as a\nfunction (like the ``connect()`` HOC of Redux).\n\nExample: ``export default Input(BasicInput)``\n\nSee the [Babel Documentation](https://babeljs.io/docs/plugins/transform-decorators/) for a detailed guide\nabout how to add decorators to your application.\n\n## Contribution\nThe project requires at least the latest stable version of node and npm. You also need to have yarn installed globally.\n\nTwo simple steps to get the things running on your local machine:\n- Fork the repo\n- Execute `yarn`\n\nYou can run the examples with `yarn run examples` and the tests with `yarn test`.\n\n### How to build a release\n\n- update the `CHANGELOG.md` with all changes regarding the new release\n- update the release version in the `package.json`\n- push the changes\n- build the project locally with `npm run build`\n- `cd` into the `dist` folder and run `npm publish --access public`\n- draft a new release at `Github` with the contents of the `CHANGELOG.md` file\n\n## License\n[MIT License](/LICENSE)\n\nCopyright (c) 2018 [Catalysts GmbH](https://www.catalysts.cc/)\n","maintainers":[{"email":"admin@cloudflight.io","name":"cloudflight-admin"},{"email":"jakob.englisch@cloudflight.io","name":"jenglisch"}],"time":{"modified":"2022-07-12T15:36:29.369Z","created":"2017-09-11T21:11:59.405Z","0.0.1":"2017-09-11T21:11:59.405Z","0.0.2":"2017-09-17T18:53:01.635Z","0.0.3":"2017-09-17T20:03:46.703Z","0.1.0":"2017-10-02T23:24:18.287Z","0.1.1":"2017-11-21T22:57:07.801Z","0.1.2":"2018-01-30T13:57:23.454Z"},"homepage":"https://github.com/cat-react/form#readme","repository":{"type":"git","url":"git+ssh://git@github.com/cat-react/form.git"},"author":{"name":"Dominik Sumer","email":"dominik.sumer@catalysts.cc"},"bugs":{"url":"https://github.com/cat-react/form/issues"},"license":"MIT","readmeFilename":"README.md"}
![\"cat-react\"](\"https://user-images.githubusercontent.com/4418879/30520764-b86d5cc6-9bb4-11e7-9313-ced40eb4e066.png\")
\n