{"id":20393054,"url":"https://github.com/aichbauer/react-form-package","last_synced_at":"2026-04-25T21:31:13.516Z","repository":{"id":33092297,"uuid":"151472885","full_name":"aichbauer/react-form-package","owner":"aichbauer","description":"A declarative form component with inbuilt validation and state management","archived":false,"fork":false,"pushed_at":"2023-04-29T13:26:40.000Z","size":6753,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-20T05:59:47.488Z","etag":null,"topics":["context","form","form-validation","forms","react","state-management","validation"],"latest_commit_sha":null,"homepage":"https://aichbauer.github.io/react-form-package/","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/aichbauer.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":"2018-10-03T20:00:55.000Z","updated_at":"2020-12-03T16:45:10.000Z","dependencies_parsed_at":"2025-01-15T10:08:42.297Z","dependency_job_id":"b97854d3-1514-4115-addc-456f764460db","html_url":"https://github.com/aichbauer/react-form-package","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"purl":"pkg:github/aichbauer/react-form-package","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aichbauer%2Freact-form-package","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aichbauer%2Freact-form-package/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aichbauer%2Freact-form-package/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aichbauer%2Freact-form-package/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aichbauer","download_url":"https://codeload.github.com/aichbauer/react-form-package/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aichbauer%2Freact-form-package/sbom","scorecard":{"id":172693,"data":{"date":"2025-08-11","repo":{"name":"github.com/aichbauer/react-form-package","commit":"1706e3b4b0c1a808b5fc7192fdf34364dff69c97"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 14 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"178 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99","Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x","Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-jrvm-mcxc-mf6m","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m","Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-c6f8-8r25-c4gc","Warn: Project is vulnerable to: GHSA-mj46-r4gr-5x83","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-4852-vrh7-28rf","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m","Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v","Warn: Project is vulnerable to: GHSA-jgmv-j7ww-jx2x","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4","Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv","Warn: Project is vulnerable to: GHSA-px4h-xg32-q955","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w","Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf","Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4","Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653","Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj","Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67","Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w","Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2","Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v","Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx","Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-gp95-ppv5-3jc5","Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-wpg7-2c88-r8xv","Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3","Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj","Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4","Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq","Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9","Warn: Project is vulnerable to: GHSA-c9g6-9335-x697","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx","Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-29xr-v42j-r956","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5","Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T16:58:32.751Z","repository_id":33092297,"created_at":"2025-08-16T16:58:32.751Z","updated_at":"2025-08-16T16:58:32.751Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32278249,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T18:29:39.964Z","status":"ssl_error","status_checked_at":"2026-04-25T18:29:32.149Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","form","form-validation","forms","react","state-management","validation"],"created_at":"2024-11-15T03:47:10.097Z","updated_at":"2026-04-25T21:31:13.494Z","avatar_url":"https://github.com/aichbauer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-form-package\n\n[![npm](https://img.shields.io/npm/v/react-form-package.svg?style=flat-square)](https://www.npmjs.com/package/react-form-package)\n![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-form-package.svg?style=flat-square)\n[![Travis branch](https://img.shields.io/travis/com/aichbauer/react-form-package/master.svg?style=flat-square)](https://travis-ci.org/aichbauer/react-form-package)\n[![Codecov branch](https://img.shields.io/codecov/c/github/aichbauer/react-form-package/master.svg?style=flat-square)](https://codecov.io/gh/aichbauer/react-form-package)\n[![storybook](https://img.shields.io/badge/docs%20with-docz-1F2D3D.svg?style=flat-square)](https://aichbauer.github.io/react-form-package)\n\n\u003e A declarative form component with inbuilt validation and state management\n\n## Table of Contents\n\n* [Documentation](https://aichbauer.github.io/react-form-package)\n* [Installation](#installation)\n* [Simple Form](#simple-form)\n* [Components](#components)\n * [Form](#form)\n * [Button](#button)\n * [Field](#field)\n * [FieldWrapper](#fieldwrapper)\n * [RadioGroup](#radiogroup)\n * [Select](#select)\n* [Form Validation](#form-validation)\n* [State](#state)\n* [State Manipulation](#state-manipulation)\n* [Custom Error Messages](#custom-error-messages)\n* [Show Errors on Button Click](#show-errors-on-button-click)\n* [Feedback on Disabled Button](#feedback-on-disabled-button)\n* [Styling](#styling)\n* [Dynamic Fields](#dynamic-fields)\n* [Dynamic Fields 2](#dynamic-fields-2)\n * [Add new Fields onClick](#add-new-fields-onclick)\n * [Add new Fields onChange](#add-new-fields-onchange)\n* [Dynamic Fields 3](#dynamic-fields-3)\n* [Bind Input Fields](#bind-input-fields)\n* [Bind Input Fields 2](#bind-input-fields-2)\n* [onFocus, onChange, onBlur](#onfocus-onchange-onblur)\n* [Third Party Components](#third-party-components)\n * [Autocomplete with Downshift](#autocomplete)\n* [File Upload](#file-upload)\n* [Why?](#why)\n* [License](#license)\n\n## Installation\n\n```sh\n$ npm i react-form-package -S\n```\n\nor\n\n```sh\n$ yarn add react-form-package\n```\n\n## Simple Form\n\n\u003e For more detailed information you can take a look at the [documentation](https://aichbauer.github.io/react-form-package)\n\nThere are five (six) different components within this package. The `\u003cFieldWrapper /\u003e` component is only here for edge cases, e.g. working with third party components. So for this simple example we stick to these five:\n\n```jsx\nimport {\n Button,\n Field,\n Form,\n RadioGroup,\n Select,\n} from 'react-form-package';\n```\n\nIf you are familiar with writing HTML forms than you are all set up. There are no complex data props or functions that you have to call before you can set up a form and validate its input like in most other libraries. Why should you care about writing the validations for your form yourself? An email, a date, a url, and so on, will always have the same structure. `react-form-package` will not only help you by your forms state management, it also will help you validating your forms correctly.\n\n### Basic Usage\n\n* Every `\u003cButton\u003e`, `\u003cField\u003e`, `\u003cRadioGroup\u003e`, and `\u003cSelect\u003e` component must have an **id property** and a **type property**\n* `\u003cSelect\u003e` components have `\u003coption\u003e` childs which must have a **value property**\n* `\u003cRadioGroup\u003e` components have `\u003cinput\u003e` childs which must have an **id property**, **type property**, and **name property**\n* If you want the form to valitate inputs and show error messages simply add a **validate prop** on the `\u003cForm\u003e` component\n\nIn this example we use all components and types this library supports:\n\n```jsx\nconst myForm = (props) =\u003e (\n\u003cForm\n validate\n\u003e\n \u003cdiv\u003e\n \u003cdiv\u003echeckbox\u003c/div\u003e\n \u003cField type=\"checkbox\" id=\"checkbox\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003etextarea\u003c/div\u003e\n \u003cField rows=\"5\" cols=\"30\" type=\"textarea\" id=\"textarea\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003edate\u003c/div\u003e\n \u003cField type=\"date\" id=\"date\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003edatetime-local\u003c/div\u003e\n \u003cField type=\"datetime-local\" id=\"datetime-local\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003eemail\u003c/div\u003e\n \u003cField type=\"email\" id=\"email\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003enumber\u003c/div\u003e\n \u003cField type=\"number\" id=\"number\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003etel\u003c/div\u003e\n \u003cField type=\"tel\" id=\"tel\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003etext\u003c/div\u003e\n \u003cField type=\"text\" id=\"text\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003epassword\u003c/div\u003e\n \u003cField type=\"password\" id=\"password\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003etime\u003c/div\u003e\n \u003cField type=\"time\" id=\"time\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003eurl\u003c/div\u003e\n \u003cField type=\"url\" id=\"url\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003eselect\u003c/div\u003e\n \u003cSelect id=\"select\" type=\"select\"\u003e\n \u003coption disabled value=\"\"\u003e--- Choose an option ---\u003c/option\u003e\n \u003coption value=\"option1\"\u003eoption 1\u003c/option\u003e\n \u003coption value=\"option2\"\u003eoption 2\u003c/option\u003e\n \u003coption value=\"option3\"\u003eoption 3\u003c/option\u003e\n \u003c/Select\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003eradio\u003c/div\u003e\n \u003cRadioGroup type=\"radio\" id=\"radio\"\u003e\n \u003cinput type=\"radio\" name=\"radio\" id=\"radio1\" /\u003e\n radio 1\n \u003cinput type=\"radio\" name=\"radio\" id=\"radio2\" /\u003e\n radio 2\n \u003cinput type=\"radio\" name=\"radio\" id=\"radio3\" /\u003e\n radio 3\n \u003c/RadioGroup\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton id=\"submit\" type=\"submit\" onClick={(state) =\u003e console.log(state)}\u003esubmit\u003c/Button\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n);\n```\n\n## Components\n\nFor more detailed information you can take a look at the [documentation](https://aichbauer.github.io/react-form-package).\n\n### Form\n\nThis component is a wrapper for all the other components in this library. This component handles the global state for the form itself.\n\n#### Basic Usage\n\n\u003e For more detailed information you can take a look at the [documentation](https://aichbauer.github.io/react-form-package)\n\nRender a table.\n\n```jsx\nimport { Form } from 'react-form-package';\n\nconst myForm = (props) =\u003e (\n \u003cForm\u003e\n {/*\n here comes your form\n mix HTML with other\n components from this\n library: e.g.\n \u003cButton /\u003e\n \u003cField /\u003e\n \u003cRadioGroup /\u003e\n \u003cSelect /\u003e\n */}\n \u003c/Form\u003e\n);\n```\n\n#### Props\n\nProperty | Type | Required | Default | Description\n---|---|---|---|---\nvalidate| Bool | false | |\nvalidateOnClick| Bool | false | If you want to show the errors of a form on the click of the button |\ninput | Element | `\u003cinput className=\"rfp-input\" /\u003e` | |\ncheckbox | Element | `\u003cinput className=\"rfp-checkbox\" /\u003e` | |\nradio | Element | `\u003cinput className=\"rfp-radio-group\" /\u003e` | |\nradioContainer | Element | `\u003cdiv className=\"rfp-radio-group-container\" /\u003e` | | The Element that wraps the radio elements.\nbutton | Element | `\u003cbutton className=\"rfp-button\" /\u003e` | |\nselect | Element | `\u003cselect className=\"rfp-select\" /\u003e` | |\ntextarea | Element | `\u003ctextarea className=\"rfp-textarea\" /\u003e` | |\nerror | Element | `\u003cdiv className=\"rfp-error-label\" /\u003e` | |\n\n### Button\n\nThis component has to be a child within the `\u003cForm /\u003e` component. This component gets the state from the `\u003cForm /\u003e` component and returns it on its onClick prop. If the `\u003cForm /\u003e` component has the validate prop set, the button will be disabled as long as the form is valid.\n\n#### Basic Usage\n\n\u003e For more detailed information you can take a look at the [documentation](https://aichbauer.github.io/react-form-package)\n\nRender a `\u003cForm /\u003e` with a `\u003cButton /\u003e` component.\n\n```jsx\nimport {\n Form,\n Button,\n} from 'react-form-package';\n\nconst myForm = (props) =\u003e (\n\u003cForm\u003e\n \u003cdiv\u003e\n \u003cButton\n id=\"submit\"\n type=\"submit\"\n onClick={state =\u003e alert(JSON.stringify(state, null, 2))}\n onMouseEnter={(e, state) =\u003e console.log(e, state)}\n onMouseLeave={(e, state) =\u003e console.log(e, state)}\n \u003e\n Click me to see the state of the form\n \u003c/Button\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n);\n```\n\n#### Props\n\nProperty | Type | Required | Default | Description\n---|---|---|---|---\nid | String | true | |\ntype | String | true | | `submit`\nonClick | Func | false | | returns the state of the form\nonMouseEnter | Func | false | | returns the event and the state of the form\nonMouseLeave | Func | false | | returns the event and the state of the form (does not work on `disabled` buttons)\nrfpRole | String | false | | only needed for [dynamically added fields](#dynamic-field-2), either `addField` or `removeField`\nfieldId | String | false | | only needed for [dynamically added fields](#dynamic-field-2) on a button with rfpRole `removeField` (the id of the field to remove)\nfield | Object | false | | only needed for [dynamically added fields](#dynamic-field-2) on a button with rfpRole `addField`. This object holds at least `id`, `type`, and may hold `min`, `max`, `required`, `match`, `sameAs`\n\n### Field\n\nThis component has to be a child within the `\u003cForm /\u003e` component. This component handles its own state and on any state change it will report it to the `\u003cForm /\u003e` component which validates the whole form.\n\n#### Basic Usage\n\n\u003e For more detailed information you can take a look at the [documentation](https://aichbauer.github.io/react-form-package)\n\nRender a `\u003cForm /\u003e` with an email `\u003cField /\u003e` and a `\u003cButton /\u003e` component.\n\n```jsx\nimport {\n Form,\n Field,\n} from 'react-form-package';\n\nconst myForm = (props) =\u003e (\n \u003cForm\u003e\n \u003cdiv\u003e\n \u003cdiv\u003eEmail\u003c/div\u003e\n \u003cdiv\u003e\n \u003cField id=\"email\" type=\"email\" reuqired /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/Form\u003e\n);\n```\n\n#### Props\n\nProperty | Type | Required | Default | Description\n---|---|---|---|---\nid | String | true | |\ntype | String | true | | `checkbox`, `date`, `textarea`, `datetime-local`, `email`, `number`, `tel`, `text`, `password`, `time`, `url`, `file`\nrequired | Bool | false | false |\nmin | String (digit or date (YYYY-MM-DD)) | false | | `text`, `textarea`, `password`: has to have at least `min` characters; `number`, `date`: has to be at least `min`\nmax | String (digit or date (YYYY-MM-DD)) | false | | `text`, `textarea`, `password`: has to have at least `min` characters; `number`, `date`: has to be at least `min`\nmatch | RegEx | false | | the input value has to match the `regular expression`\nsameAs | String | the input value has to have the same value as the input field with the id specified in `sameAs`\npreOnChange | Func | false | | manipulate the state before its validated (see [State Manipulation](#state-manipulation))\nerrorMessage | String | false | | define your own custom error message for the input\nonFocus | Func | false | | get access to the state of the form when the user focus on the input\nonChange | Func | false | | get access to the state of the form when the user changes the input\nonBlur | Func | false | | get access to the state of the form when the user blurs the input\ndynamic | Bool | false | | only needed for [dynamically added fields](#dynamic-field-2)\nfield | Object | false | | only needed for [dynamically added fields](#dynamic-field-2). This object holds at least `id`, `type`, and may hold `min`, `max`, `required`\nbintTo | String | false | | only needed for [binding input fields](#bind-input-fields). The id of the inpu you want to manipulate\nbindToCallback | Func | false | | only needed for [binding input fields](#bind-input-fields). The callback to set the target's (`bindTo`) input value, which gets called `onChange`\n\n### FieldWrapper\n\n\u003e This component is here for edge cases where you get the state from another component and you have to pass it to the `\u003cForm /\u003e` component manually, e.g. third party components.\n\nThis component has to be a child within the `\u003cForm /\u003e` component. This component exposes three additional props to its child component so that you are able to use third party components.\n\n#### Basic Usage\n\n```jsx\nimport {\n Form,\n FieldWrapper,\n} from 'react-form-package';\n```\n\nRender a `\u003cForm /\u003e` with an `\u003cFieldWrapper /\u003e` and a `\u003cButton /\u003e` component.\n\nTake a look into the [Third Party Components Section](#third-party-components) to see how you can use this component properly.\n\n```jsx\n \u003cForm\u003e\n \u003cdiv\u003e\n \u003cFieldWrapper type=\"text\" id=\"fieldwrapper\"\u003e\n {/*\n Render a child component that gets access to\n\n onFocus\n onBlur\n onChange\n */}\n \u003c/FieldWrapper\u003e\n \u003cdiv\u003e\n \u003cButton id=\"submit\" type=\"submit\" onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003eSubmit\u003c/Button\u003e\n \u003c/div\u003e\n \u003c/Form\u003e\n```\n\n#### Props\n\nProperty | Type | Required | Default | Description\n---|---|---|---|---\nid | String | true | |\ntype | String | true | | `checkbox`, `date`, `textarea`, `datetime-local`, `email`, `number`, `tel`, `text`, `password`, `time`, `url`, `file`\nrequired | Bool | false | false |\nmin | String (digit or date (YYYY-MM-DD)) | false | | `text`, `textarea`, `password`: has to have at least `min` characters; `number`, `date`: has to be at least `min`\nmax | String (digit or date (YYYY-MM-DD)) | false | | `text`, `textarea`, `password`: has to have at least `min` characters; `number`, `date`: has to be at least `min`\nmatch | RegEx | false | | the input value has to match the `regular expression`\nsameAs | String | the input value has to have the same value as the input field with the id specified in `sameAs`\npreOnChange | Func | false | | manipulate the state before its validated (see [State Manipulation](#state-manipulation))\nerrorMessage | String | false | | define your own custom error message for the input\n\n#### Props that get exposed to the child component\n\nTo see how you can use this properties take a look at [Third Party Components](#third-party-components)\n\nProperty | Type | Required | Default | Description\n---|---|---|---|---\nonFocus | Func | false | | pass your `value` to this function to update the state of the `\u003cForm /\u003e` component\nonChange | Func | false | | pass your `value` to this function to update the state of the `\u003cForm /\u003e` component\nonBlur | Func | false | | pass your `value` to this function to update the state of the `\u003cForm /\u003e` component\nmeta | Object | false | | get access to the state of the `\u003cFieldWrapper /\u003e` component (see [State](#state))\n\n### RadioGroup\n\nThis component has to be a child within the `\u003cForm /\u003e` component. This component must have `\u003cinput /\u003e` components with the type=\"radio\" as children. These children components must have a name prop which has to match the parents id. The id of the children will be the value of the `\u003cRadioGroup /\u003e` component when clicked.\n\n#### Basic Usage\n\n\u003e For more detailed information you can take a look at the [documentation](https://aichbauer.github.io/react-form-package)\n\nRender a `\u003cForm /\u003e` with a `\u003cRadioGroup /\u003e` component.\n\n```jsx\nimport {\n Form,\n RadioGroup,\n} from 'react-form-package';\n\nconst myForm = (props) =\u003e (\n \u003cForm\u003e\n \u003cdiv\u003eChoose an option\u003c/div\u003e\n \u003cRadioGroup type=\"radio\" id=\"option\"\u003e\n \u003cdiv\u003e\n \u003cdiv\u003eoption 1\u003c/div\u003e\n \u003cinput type=\"radio\" name=\"option\" id=\"option1\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003eoption 2\u003c/div\u003e\n \u003cinput type=\"radio\" name=\"option\" id=\"option2\" /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003eoption 3\u003c/div\u003e\n \u003cinput type=\"radio\" name=\"option\" id=\"option3\" /\u003e\n \u003c/div\u003e\n \u003c/RadioGroup\u003e\n \u003c/Form\u003e\n);\n```\n\n#### Props\n\nProperty | Type | Required | Default | Description\n---|---|---|---|---\nid | String | true | |\ntype | String | true | | `radio`\nrequired | Bool | false | false |\npreOnChange | Func | false | | manipulate the state before its validated (see [State Manipulation](#state-manipulation))\nerrorMessage | String | false | | define your own custom error message for the input\nonFocus | Func | false | | get access to the state of the form when the user focus on the input\nonChange | Func | false | | get access to the state of the form when the user changes the input\nonBlur | Func | false | | get access to the state of the form when the user blurs the input\nbintTo | String | false | | only needed for [binding input fields](#bind-input-fields). The id of the inpu you want to manipulate\nbindToCallback | Func | false | | only needed for [binding input fields](#bind-input-fields). The callback to set the target's (`bindTo`) input value, which gets called `onChange`\n\n### Select\n\nThis component has to be a child within the `\u003cForm /\u003e` component. This component must have `\u003coption /\u003e` components with an value prop as children.\n\n#### Basic Usage\n\n\u003e For more detailed information you can take a look at the [documentation](https://aichbauer.github.io/react-form-package)\n\nRender a `\u003cForm /\u003e` with a `\u003cSelect /\u003e` and a `\u003cButton /\u003e` component.\n\n```jsx\nimport {\n Form,\n Select,\n} from 'react-form-package';\n\nconst myForm = (props) =\u003e (\n \u003cForm\u003e\n \u003cdiv\u003eSelect an option\u003c/div\u003e\n \u003cSelect id=\"select\" type=\"select\"\u003e\n \u003coption disabled value=\"\"\u003e\n --- Select an option ---\n \u003c/option\u003e\n \u003coption value=\"option1\"\u003eoption 1\u003c/option\u003e\n \u003coption value=\"option2\"\u003eoption 2\u003c/option\u003e\n \u003coption value=\"option3\"\u003eoption 3\u003c/option\u003e\n \u003c/Select\u003e\n \u003c/Form\u003e\n);\n```\n\n#### Props\n\nProperty | Type | Required | Default | Description\n---|---|---|---|---\nid | String | true | |\ntype | String | true | | `select`\nrequired | Bool | false | false |\npreOnChange | Func | false | | manipulate the state before its validated (see [State Manipulation](#state-manipulation))\nerrorMessage | String | false | | define your own custom error message for the input\nonFocus | Func | false | | get access to the state of the form when the user focus on the input\nonChange | Func | false | | get access to the state of the form when the user changes the input\nonBlur | Func | false | | get access to the state of the form when the user blurs the input\nbintTo | String | false | | only needed for [binding input fields](#bind-input-fields). The id of the inpu you want to manipulate\nbindToCallback | Func | false | | only needed for [binding input fields](#bind-input-fields). The callback to set the target's (`bindTo`) input value, which gets called `onChange`\n\n## Form Validation\n\nAlmost any form needs validation in some way. Fortunatly `react-form-package` comes with an declarative inbuild validation system.\n\nWhat does decalrative mean in that way?\n\n### Basic Example\n\nIf you want that your input field only allows valid emails you can add the type `email` to the `\u003cField /\u003e` component. If you also set `validate` property on the `\u003cForm /\u003e` component the button only allowes to submit if the form is completely valid.\n\nIn the next example you are able to submit the form if the input is empty (because this field is not required) and if the input value is set to a valid email, but not if the input value is not a valid email.\n\n```jsx\n\u003cForm\n validate\n\u003e\n \u003cdiv\u003e\n Email\n \u003cdiv\u003e\n \u003cField type=\"email\" id=\"email\" /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton\n type=\"submit\"\n id=\"submit\"\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003e\n Submit\n \u003c/Button\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n```\n\nIf you add the property `required` to the `\u003cField /\u003e` component, everything stays the same except that you are not able to submit the form if the input value is empty.\n\n```jsx\n\u003cForm\n validate\n\u003e\n \u003cdiv\u003e\n Email\n \u003cdiv\u003e\n \u003cField type=\"email\" id=\"email\" required /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton\n type=\"submit\"\n id=\"submit\"\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003e\n Submit\n \u003c/Button\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n```\n\n### Type validation\n\nA `\u003cField /\u003e` component can have diffferent `type` properties.\n\nAdditionally to the validation, if the browser supports HTML5 input types the input fields will be displayed as them, only allowing numbers by default if the type is set to `number`, etc. If the browser does not support HTML5 it will automatically uses a text input that keeps the validation. If the user inputs a non numeric character in a `number` input it will display the the error message and you cannot submit the form.\n\nType| Description \n---|---\n`checkbox` | `no` additional validation\n`date` | validates if the input value matches the format `YYYY-MM-DD`\n`textarea` | `no` additional validation\n`datetime-local` | validates if the input value matches the format `YYYY-MM-DDTHH:MM`\n`email` | validates if the input value matches the `standard email format`\n`number` | validates if the input value matches a `valid number`\n`tel` | validates if the input value matches the `standard phone number format`\n`text` | `no` additional validation\n`password` | `no` additional validation\n`time` | validates if the input value matches the format `HH:MM`\n`url` | validates if the input value matches the `standard url format`\n`file` | `no` additional validation\n\n### Additional rules\n\nIf you are using a `\u003cField /\u003e` component you can also add some additional rules for the validation.\n`required` will work on all components, the `\u003cField /\u003e`, the `\u003cRadioGroup /\u003e`, and the `\u003cSelect /\u003e`\n\nProperty | Type | Description\n---|---|---\n`required` | Bool | validates if the `input value is not empty`\n`min` | String (digit or date (YYYY-MM-DD)) | `text`, `textarea`, `password`: validates if the input value is at least `min characters long`; `number`, `date`: validates if the input value is at least `min`\n`max` | String (digit or date (YYYY-MM-DD)) | `text`, `textarea`, `password`: validates if the input value is maximum `max characters long`; `number`, `date`: validates if the input value is maximum `max`\n`match` | Regex | validates if the input value matches the `regular expression`\n`sameAs` | String | validates if the input of this field has the same value as the field specified in `sameAs`\n`validate` | Func | a function that gets access to the value of the field `(value) =\u003e // write your own validation` (do not forget to write your own errorMessage)\n\nExample with the `required`, `min`, `max`, `validate`, and `sameAs` properties:\n\n```jsx\n\u003cForm\n validate\n\u003e\n \u003cdiv\u003e\n Text required, min, max\n \u003cdiv\u003e\n \u003cField type=\"text\" id=\"text\" min=\"2\" max=\"5\" required /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n Number required, min, max\n \u003cdiv\u003e\n \u003cField type=\"number\" id=\"number\" min=\"2\" max=\"5\" required /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n Text is required and has to validate the `validate` function (value === 'react')\n \u003cdiv\u003e\n \u003cField type=\"text\" id=\"validate\" validate={(value) =\u003e value === 'react'} errorMessage={'This field is required\\\\nThis field has to match \"react\"'} required /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n Date required, min, max\n \u003cdiv\u003e\n \u003cField type=\"date\" id=\"date\" min=\"2018-12-12\" max=\"2018-12-24\" required /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n Password has to be the same as password 2\n \u003cdiv\u003e\n \u003cField type=\"password\" id=\"password\" sameAs=\"password2\" required /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n Password 2 has to be the same as password\n \u003cdiv\u003e\n \u003cField type=\"password\" id=\"password2\" sameAs=\"password\" required /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton\n type=\"submit\"\n id=\"submit\"\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003e\n Submit\n \u003c/Button\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n```\n\nExample with the match property:\n\n```jsx\n\u003cForm\n validate\n\u003e\n \u003cdiv\u003e\n Text required and has to match \"react\"\n \u003cdiv\u003e\n \u003cField type=\"text\" id=\"text\" match={/react/} required /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton\n type=\"submit\"\n id=\"submit\"\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003e\n Submit\n \u003c/Button\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n```\n\nThis is just a simple example, off course you are able to pass any regular expression you would like. If you would like to customize the error messages take a look at [custom error messages](#custom-error-messages)\n\n## State\n\n\u003e Working with the state data and meta data\n\nA simple Example of how your Form could look like:\n\n```jsx\n\u003cForm\u003e\n \u003cField id=\"email\" type=\"email\" required /\u003e\n \u003cField id=\"password\" type=\"password\" required /\u003e\n \u003cButton\n id=\"button\"\n type=\"submit\"\n onClick={(state) =\u003e this.handleOnClick(state)}\n \u003e\n Submit\n \u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n\u003e You can also use `onFocus`, `onChange`, and `onBlur` on every `Field`, `Select`, or `RadioGroup` components to get access to the state of the form ([more info](#onfocus-onchange-onblur))\n\nAs you can see the `\u003cButton /\u003e` component has a `onClick` property. This property takes a function. The `handleOnClick` function could look something like:\n\n```js\nasync handleOnClick(state) {\n // do something with the state\n // e.g. send data to a server\n try {\n const response = await fetch('https://server.com/login', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json; charset=utf-8',\n },\n body: JSON.stringify(state.data);\n });\n // do something with the response\n } catch(error) {\n // do something with the error\n }\n}\n```\n\nAs you can see the `state` parameter is an object. It has three different properties.\n\n* **data**: `object`\n* **meta**: `object`\n* **formValid**: `boolean`\n\nIn our case `data` would hold:\n\n```js\n{\n \"data\": {\n \"email\": \"\",\n \"password\": \"\"\n }\n}\n```\n\n`meta` would hold:\n\n```js\n{\n \"meta\": {\n \"email\": {\n \"initialValue\": \"\",\n \"dirty\": false,\n \"pristine\": true,\n \"visited\": false,\n \"touched\": false,\n \"value\": \"\",\n \"valid\": false,\n \"invalid\": true,\n \"rules\": {\n \"type\": \"email\",\n \"min\": undefined,\n \"max\": undefined,\n \"sameAs\": undefined,\n \"match\": undefined,\n \"required\": true,\n }\n },\n \"password\": {\n \"initialValue\": \"\",\n \"dirty\": false,\n \"pristine\": true,\n \"visited\": false,\n \"touched\": false,\n \"value\": \"\",\n \"valid\": false,\n \"invalid\": true,\n \"rules\": {\n \"type\": \"password\",\n \"min\": undefined,\n \"max\": undefined,\n \"sameAs\": undefined,\n \"match\": undefined,\n \"required\": true,\n }\n }\n }\n}\n```\n\n`formValid` would hold:\n\n```js\n{\n \"formValid\": false\n}\n```\n\n### Meta Description\n\nMeta data gives you an overview of what happened on that field. E.g. if a field is `pristine` you could deside to not send its data to the server since, nothing changed.\n\nProperty | Type | Description\n---|---|---\ninitialValue | `String` or `Bool` |\ndirty | `Bool` | `true` if the `value !== initialValue`\npristine | `Bool` | `true` if the `value === initialValue`\nvisited | `Bool` | `true` if this field was focused (`onFocus`)\ntouched | `Bool` | `true` if this field was blurred (`onBlur`)\nvalue | `String` or `Bool` |\nvalid | `Bool` | `true` if this field is valid (passed all rules)\ninvalid | `Bool` | `true` if this field is invalid (failed at least one rules)\nrules | `object` | the rules for the validation of this field\nrules.type | `String` | `checkbox`, `date`, `textarea`, `datetime-local`, `email`, `number`, `tel`, `text`, `password`, `time`, `url`, `radio`, `select`\nrules.min | `Number` or `String` (YYYY-MM-DD) | `text`, `textarea`, `password`: this field has to have at least `min` characters; `number`, `date`: this field has to be at least `min`\nrules.max | `Number` or `String` (YYYY-MM-DD) | `text`, `textarea`, `password`: this field has to have maximum `max` characters; `number`, `date`: this field has to be maximum `max`\nrules.match | `RegEx` | thie fields has to match the regular expression\nrules.sameAs | `String` | thie fields has to have the same value as the field with id `sameAs` (e.g. password fields)\nrules.required | `Bool` | this field is required (has to have a value)\n\n## State Manipulation\n\n\u003e How to manipulate the state before it is validated\n\nSometimes you need to manipulate the value of a input. It is not recommended, but there are some edge cases and situations where this comes in handy, e.g. you have an input and you have to ensure that the user capitalizes the first letter, e.g. on names.\n\nFor this use cases there is a property called `preOnChange`. This property takes a function that returns the new value of the input. You can only manipulate the value of the current input field.\n\nThe next example manipulates the input value that it always capitalizes the first letter of every word in the input field.\n\n```jsx\n\u003cForm\n validate\n\u003e\n \u003cdiv\u003e\n \u003cdiv\u003e\n Name:\n \u003c/div\u003e\n \u003cField \n id=\"name\"\n type=\"text\"\n // `value` is the current value of the input field\n preOnChange={(value) =\u003e autocapitalize(value, 'words')}\n required\n /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton\n id=\"submit\"\n type=\"submit\"\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003e\n Submit\n \u003c/Button\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n```\n\n## Custom Error Messages\n\nIf you want to display your own error messages, use the `errorMessage` property on the `\u003cField /\u003e`, `\u003cSelect/\u003e`, or `\u003cRadioGroup/\u003e` component.\n\n```jsx\n\u003cForm\u003e\n \u003cdiv\u003e\n \u003cdiv\u003eEmail\u003c/div\u003e\n \u003cField id=\"email\" type=\"email\" required errorMessage=\"This is a custom error message!\" /\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n```\n\n## Show Errors on Button Click\n\nIf you want to display the the erros on the button click you need to add the prop `validateOnClick` to the form.\nWhen using the prop `validateOnClick` the state is also returned in the `onClick` function. You can check with\n`state.formValid` if the data is valid and here you can start your request or whatever you need todo with the information.\n\n```jsx\n\u003cForm\n validate\n validateOnClick\n\u003e\n \u003cdiv\u003e\n \u003cdiv\u003eEmail\u003c/div\u003e\n \u003cField id=\"email\" type=\"email\" required /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton type=\"submit\" id=\"submit\" onClick={(state) =\u003e {\n if (state.formValid) {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }\n\n // do something else if form data is not valid\n }}\u003e\n Submit\n \u003c/Button\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n```\n\n## Feedback on Disabled Button\n\nSometimes it is necessary to show an informal error message to the user when is hovering on a disabled button (which means the form is not valid yet).\n\nFor this example we use a popover for our disabled button that gives the user a hint what should be filled.\n\nFirst import all the components that we need. We use [styled-bootstrap-components](https://aichbauer.github.io/styled-bootstrap-components) for our popup. You could also use a toast or something similar to indicate the user what fields are open.\n\n```js\nimport {\n Form,\n Field,\n Button,\n} from 'react-form-package';\nimport {\n Popover,\n PopoverArrow,\n PopoverBody,\n PopoverHeader,\n} from 'styled-bootstrap-component';\n```\n\nNext we make use of the buttons `onMouseEnter` function (unfortunatly the `onMouseLeave` function does not work on disabled buttons so we can not use it to hide the popover), and a `setTimeout` to hide the popover.\n\n```js\nclass PopoverHint extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n top: 0,\n left: 0,\n hidden: true,\n notValidFields: '',\n };\n\n this.handlePopover = this.handlePopover.bind(this);\n }\n\n handlePopover(ev, state) {\n const { hidden } = this.state;\n\n let notValidFields = Object.entries(state.meta).map((entry) =\u003e {\n if (!entry[1].valid) {\n return entry[0];\n }\n });\n\n notValidFields = notValidFields.filter((i) =\u003e i !== undefined);\n\n if (!state.formValid) {\n this.setState({\n top: ev.target.offsetTop - ev.target.offsetHeight,\n left: ev.target.offsetLeft + ev.target.offsetWidth,\n hidden: !hidden,\n notValidFields: notValidFields.join(),\n }, () =\u003e {\n const { hidden: h } = this.state;\n setTimeout(() =\u003e this.setState({\n hidden: !h,\n }), 1500);\n });\n }\n }\n\n render() {\n const {\n top,\n left,\n hidden,\n notValidFields,\n } = this.state;\n\n return (\n \u003cForm\n validate\n input={\u003cFormControl /\u003e}\n button={\u003cBtn primary mt=\"3px\" mb=\"3px\" /\u003e}\n \u003e\n \u003cField type=\"email\" id=\"email\" required /\u003e\n \u003cdiv\u003e\n \u003cButton\n danger\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n onMouseEnter={(e, state) =\u003e this.handlePopover(e, state)}\n \u003e\n Hover button to show which fields are not valid\n \u003c/Button\u003e\n \u003cPopover\n hidden={hidden}\n style={{\n top: `${top}px`,\n left: `${left}px`,\n }}\n right\n \u003e\n \u003cPopoverArrow right /\u003e\n \u003cPopoverHeader right\u003eYou need to fill out this fields\u003c/PopoverHeader\u003e\n \u003cPopoverBody right\u003e{notValidFields}\u003c/PopoverBody\u003e\n \u003c/Popover\u003e\n \u003c/div\u003e\n \u003c/Form\u003e\n );\n }\n}\n\nexport { PopoverHint };\n```\n\nNow we render the `\u003cPopoverHint /\u003e` and see the result.\n\n```js\n \u003cPopoverHint /\u003e\n```\n\n## Styling\n\nTo style this form you have three different options, all requires to pass a React component to a form prop.\n\n### CSS-in-JS\n\n\u003e In this section we will use a library that uses `styled-components` to style our form\n\nFirst you have to import the this library and the Form Components you want to use for your styling. In this example we will use [styled-bootstrap-components](https://aichbauer.github.io/styled-bootstrap-components).\n\n```jsx\nimport {\n Form,\n Field,\n Button,\n} from 'react-form-package';\nimport {\n Label,\n FormGroup,\n FormControl,\n Column,\n Button as Btn,\n} from 'styled-bootstrap-components';\n```\n\nThe next step is to create you form and pass the styled components as props to the `\u003cForm /\u003e` component\n\n```jsx\n \u003cForm\n input={\u003cFormControl /\u003e}\n button={\u003cBtn primary mt=\"3px\" mb=\"3px\" /\u003e}\n \u003e\n \u003cFormGroup row nomb\u003e\n \u003cColumn sm={6}\u003e\n \u003cFormGroup\u003e\n \u003cLabel\u003eEmail\u003c/Label\u003e\n \u003cField id=\"email\" type=\"email\" placeholder=\"Email\" /\u003e\n \u003c/FormGroup\u003e\n \u003c/Column\u003e\n \u003cColumn sm={12}\u003e\n \u003cButton id=\"submit\" type=\"submit\" onClick={(state) =\u003e console.log(state)} primary\u003eSubmit\u003c/Button\u003e\n \u003c/Column\u003e\n \u003c/FormGroup\u003e\n \u003c/Form\u003e\n```\n\n### style prop\n\n\u003e In this section we will use a the `style` prop to style our form\n\nTo style your form pass components to the `\u003cForm /\u003e` component that are styled with the style tag. When you create your own `\u003cinput /\u003e`, `\u003cbutton /\u003e` components do not forget do bind functions like `onClick`, `onChange`, `onFocus`, `onBlur`. This functions are needed to make `react-form-package` work properly.\n\n```jsx\nconst MyButton = (props) =\u003e (\n \u003cbutton\n type=\"submit\"\n style={{\n margin: '10px 0px',\n padding: '8px 24px',\n borderRadius: '5px',\n border: 'none',\n background: '#7FDBFF',\n color: '#001f3f',\n cursor: 'pointer',\n }}\n onClick={props.onClick}\n \u003e\n {props.children}\n \u003c/button\u003e\n);\n\nconst MyInput = (props) =\u003e (\n \u003cinput\n style={{\n margin: '10px 0px',\n padding: '8px 3px',\n border: '1px solid #7FDBFF',\n borderRadius: '5px',\n color: 'black',\n }}\n value={props.value}\n placeholder={props.placeholder}\n onChange={props.onChange}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n /\u003e\n);\n```\n\nThe next step is to simply create you form and pass the styled components as props to the `\u003cForm /\u003e` component\n\n```jsx\n \u003cForm\n button={\u003cMyButton /\u003e}\n input={\u003cMyInput /\u003e}\n \u003e\n \u003cdiv\u003e\n Email\n \u003c/div\u003e\n \u003cField type=\"email\" id=\"email2\" placeholder=\"Email\" /\u003e\n \u003cButton type=\"submit\" id=\"submit2\" onClick={(state) =\u003e console.log(state)}\u003eSubmit\u003c/Button\u003e\n \u003c/Form\u003e\n```\n\n### CSS and className\n\n\u003e In this section we will use a the `className` prop and a css file to style our form\n\nTo style your form pass components to the `\u003cForm /\u003e` component that have `className` prop and use css files (make sure to have an appropriate loader for your bundler).\n\n```css\n.button {\n background: #001f3f;\n border: 1px solid black;\n padding: 8px 24px;\n border-radius: 3px;\n color: white;\n cursor: pointer;\n}\n\n.input {\n margin: 10px 0px;\n padding: 8px 3px;\n border: 1px solid #001f3f;\n border-radius: 5px;\n}\n```\n\nImport your `CSS file` to your application and make sure you have a loader for css.\n\n```jsx\nimport './style.css';\n\nconst MyClassNameButton = (props) =\u003e (\n \u003cbutton\n clssName=\"button\"\n \u003e\n {children}\n \u003c/button\u003e\n);\n\nconst MyClassNameInput = (props) =\u003e (\n \u003cinput\n className=\"input\"\n value={props.value}\n placeholder={props.placeholder}\n onChange={props.onChange}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n /\u003e\n);\n```\n\nThe next step is to create you form and pass the styled components as props to the `\u003cForm /\u003e` component.\n\n```jsx\n \u003cForm\n button={\u003cMyClassNameButton /\u003e}\n input={\u003cMyClassNameInput /\u003e}\n \u003e\n \u003cdiv\u003e\n Email\n \u003c/div\u003e\n \u003cField type=\"email\" id=\"email2\" placeholder=\"Email\" /\u003e\n \u003cButton type=\"submit\" id=\"submit2\" onClick={(state) =\u003e console.log(state)}\u003eSubmit\u003c/Button\u003e\n \u003c/Form\u003e\n```\n\n### Passing props\n\nTo actually make your own components working with `react-form-package` you have to pass some props.\n\n#### components\n\n* The `Prop` is the prop on the `\u003cForm /\u003e` component.\n* `HTML` is the actual HTML element to use.\n* `Props` are the props you have to pass these components e.g. `id={prop.id} or id={this.prop.id}` or `onChange={prop.onChange} or onChange={this.prop.onChange}`.\n* `Info` shows you which props you have to bind.\n\nProp | HTML | Props | Info\n---|--- | --- | ---\ninput | input | `id`, `type`, `onChange`, `onBlur`, `onFocus` |\ncheckbox | input | `id`,`type`, `onChange`, `onBlur`, `onFocus` |\nradio | div | `id`,`type`, `onChange`, `onBlur`, `onFocus`, `children` | this is a wrapper that renders every child, and watch out for `\u003cinput type=\"radio\" value=\"someValue\" name=\"theIdRadioGroup\" /\u003e` and handles their state\nbutton | input | `id`, `type`, `onClick`, `children` |\nselect | select | `id`, `type`, `onChange`, `onBlur`, `onFocus`, `children` | this is a wrapper that renders every child, and watch out for `\u003coption value=\"someValue\" /\u003e` and handles their state\ntextarea | textarea | `id`, `type`, `onChange`, `onBlur`, `onFocus` |\n\nA `textarea` example:\n\n```jsx\nconst myTextarea = (props) =\u003e (\n \u003ctextarea\n id={props.id}\n type={props.type}\n onChange={props.onChange}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n /\u003e\n);\n```\n\n## Dynamic Fields\n\nSometimes you need to create your `Form` out of dynamic data, e.g. from data you received from a server. This is mostly the case when using `checkboxes`, `radio groups`, or `select fields`.\n\nFor example: you could receive the data from the server and than use `setState` to set the data for your `checkboxes`, `radio groups`, and `select fields` used in your `\u003cForm /\u003e` component.\n\n```js\nasync componentDidMount() {\n const response = await getDataFromServer();\n\n this.setState({\n checkboxData: response.data.checkboxData,\n selectData: response.data.selectData,\n radioData: response.data.radioData,\n });\n}\n```\n\nThan in your render function you would return something like:\n\n```jsx\n\u003cForm\u003e\n \u003cdiv\u003e\n {checkboxData.map((checkbox) =\u003e (\n \u003cdiv\u003e\n \u003cdiv\u003e{checkbox.name}\u003c/div\u003e\n \u003cField id={checkbox.id} type=\"checkbox\" /\u003e\n \u003c/div\u003e\n ))}\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cSelect type=\"select\" id=\"select\"\u003e\n \u003coption\n disabled\n value=\"\"\n \u003e\n --- Select an option ---\n \u003c/option\u003e\n {selectData.map((selectOption) =\u003e (\n \u003coption value={selectOption.value}\u003e{selectOption.name}\u003c/option\u003e\n ))} \n \u003c/Select\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cRadioGroup type=\"radio\" id=\"radioID\"\u003e\n {radioData.map((radioOption) =\u003e (\n \u003cdiv\u003e\n \u003cdiv\u003e{radioOption.name}\u003c/div\u003e\n \u003cinput type=\"radio\" name=\"radioID\" id={radioOption.id} /\u003e\n \u003c/div\u003e\n ))} \n \u003c/RadioGroup\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton type=\"submit\" id=\"submit\" onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\u003e\n Submit\n \u003c/Button\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n```\n\n## Dynamic Fields 2\n\nSometimes you do not know how many fields your form should have, so you need a way to add dynamic fields on user events, e.g. on a button click if a user should decide if a new field is needed, or on a change of a field, e.g. when a field is filled a new field should appear.\n\n### Add new Fields onClick\n\nFirst off, import your components.\n\n```js\nimport React from 'react';\nimport {\n Form,\n Field,\n Button,\n} from 'react-form-package';\n```\n\nThe next step is to create a `class` that will render our form.\n\nThe state is allways handled by `react-form-package`, the only thing that you need todo is to handle the appearence of the form, e.g. add or remove the input.\n\nWe need create a `addField`, `removeField`, and optionally a `calculateAvailableId` function. The `calculateAvailableId` is only nessacary if you work on non unique index-based ids so that you ensure you do not overide an existing id.\n\nThe `addField` function is here to add a new Field when you click on a `\u003cButton /\u003e` component.\n\nTo update the state of the `\u003cForm /\u003e` component, you need to add a `rfpRole` property and a `field` or a `fieldId` property to a `\u003cButton /\u003e` component.\n\nThe `rfpRole` takes a string which is either `addField` or `removeField`. \n\nIf you use the `\u003cButton /\u003e` component to add a new field to the state of the form component you need to provide a `field` property which takes an object that represents your new `\u003cField /\u003e` component. This object has to have at least a `id` and a `type`, but you can extend this object with rules like: `min`, `max`, `required`, `match`, and `sameAs`.\n\nIf you use the `\u003cButton /\u003e` component to add remove an existing field from the state of the form component you need to provide a `fieldId` property which takes a string: the `id` of the field you want to remove.\n\nIn the state of the `DynamicFields` component you have to create an array where you add refrences to the fields of your dynamic `\u003cField /\u003e` components. To add new fields you need to add a new refrence, so that the part of the DOM rerenders with the new Field Component. To remove the Fields not only from the state of the `\u003cForm /\u003e` component but also from the DOM, you need to remove the refrences in your state that the component rerenders that part of the DOM.\n\n```jsx\nclass DynamicFields extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n // the field refrences that we use to render in our \u003cForm /\u003e component\n companies: [\n {\n id: 'company-0',\n },\n ],\n };\n\n this.addField = this.addField.bind(this);\n this.removeField = this.removeField.bind(this);\n this.calculateAvailableId = this.calculateAvailableId.bind(this);\n }\n\n calculateAvailableId() {\n const {\n companies,\n } = this.state;\n\n const arr = companies.map((item) =\u003e parseInt(item.id.split('-')[1], 10));\n\n let currentHighestId = Math.max(...arr);\n currentHighestId = currentHighestId !== -Infinity ? currentHighestId : 0;\n\n const highestAvailableId = currentHighestId + 1;\n\n return highestAvailableId;\n }\n\n addField() {\n const {\n companies,\n } = this.state;\n\n const highestAvailableId = this.calculateAvailableId();\n\n // add a new field refrence to the \u003cForm /\u003e component\n this.setState({\n companies: companies.concat({ id: `company-${highestAvailableId}` }),\n });\n }\n\n removeField(idx) {\n const {\n companies,\n } = this.state;\n\n // remove a field refrence to the \u003cForm /\u003e component\n this.setState({\n companies: companies.filter((_, index) =\u003e idx !== index),\n });\n }\n\n render() {\n const {\n companies,\n } = this.state;\n\n const highestAvailableId = this.calculateAvailableId();\n\n return (\n \u003cForm\n validate\n \u003e\n {/* render the \u003cField /\u003e components based on our field refrences */}\n {companies.map((company, idx) =\u003e (\n \u003cdiv\u003e\n \u003cField\n id={company.id}\n placeholder={`Company ${company.id.split('-')[1]}`}\n type=\"text\"\n required\n /\u003e\n \u003cButton\n id=\"removeField\"\n // add the rfpRole property\n rfpRole=\"removeField\"\n type=\"button\"\n // add the fieldId property to remove the field from the state of the \u003cForm /\u003e component\n fieldId={company.id}\n onClick={() =\u003e this.removeField(idx)}\n \u003e\n Remove Company\n \u003c/Button\u003e\n \u003c/div\u003e\n ))}\n \u003cdiv\u003e\n \u003cButton\n id=\"addField\"\n // add the rfpRole property\n rfpRole=\"addField\"\n type=\"button\"\n // add the field property to add to the state state of the \u003cForm /\u003e component\n field={{\n id: `company-${highestAvailableId}`,\n type: 'text',\n required: true,\n }}\n onClick={() =\u003e this.addField()}\n \u003e\n Add Company\n \u003c/Button\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton\n id=\"submit\"\n type=\"submit\"\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003e\n submit\n \u003c/Button\u003e\n \u003c/div\u003e\n \u003c/Form\u003e\n );\n }\n}\n\nexport { DynamicFields };\n```\n\nNow render this Component. Everytime you click on the button `Add Company` you get a new field, and everytime you click on the button `Remove Company` you remove the corresponding field.\n\n### Add new Fields onChange\n\nFirst off, import your components.\n\n```js\nimport React from 'react';\nimport {\n Form,\n Field,\n Button,\n} from 'react-form-package';\n```\n\nThe next step is to create a `class` that will render our form. \n\nEverything stays the same as in the example above, except:\n\nThat we now use a `dynamic` property and the `field` property on the `\u003cField /\u003e` component. the `field` property takes the same properties as in the `\u003cButton /\u003e` component. The `dynamic` property indicates that this `\u003cField /\u003e` component is dynamic and adds a new field in the state of the `\u003cForm /\u003e` component when this `\u003cField /\u003e` is filled.\n\n```jsx\nclass DynamicFields extends React.Component {\n constructor(props) {\n super(props);\n\n // the field refrences that we use to render in our \u003cForm /\u003e component\n this.state = {\n companies: [\n {\n id: 'company-0',\n },\n ],\n };\n\n this.addField = this.addField.bind(this);\n this.removeField = this.removeField.bind(this);\n this.calculateAvailableId = this.calculateAvailableId.bind(this);\n }\n\n calculateAvailableId() {\n const {\n companies,\n } = this.state;\n\n const arr = companies.map((item) =\u003e parseInt(item.id.split('-')[1], 10));\n\n let currentHighestId = Math.max(...arr);\n currentHighestId = currentHighestId !== -Infinity ? currentHighestId : 0;\n\n const highestAvailableId = currentHighestId + 1;\n\n return highestAvailableId;\n }\n\n addField(state, id) {\n const {\n companies,\n } = this.state;\n\n const highestAvailableId = this.calculateAvailableId();\n\n // add a new field refrence to the \u003cForm /\u003e component\n if (state.data[id] \u0026\u0026 parseInt(id.split('-')[1], 10) + 1 === highestAvailableId) {\n this.setState({\n companies: companies.concat({ id: `company-${highestAvailableId}` }),\n });\n }\n }\n\n removeField(idx) {\n const {\n companies,\n } = this.state;\n\n // remove a field refrence to the \u003cForm /\u003e component\n this.setState({\n companies: companies.filter((_, index) =\u003e idx !== index),\n });\n }\n\n render() {\n const {\n companies,\n } = this.state;\n\n const highestAvailableId = this.calculateAvailableId();\n\n return (\n \u003cForm\u003e\n {/* render the \u003cField /\u003e components based on our field refrences */}\n {companies.map((company, idx) =\u003e (\n \u003cdiv\u003e\n \u003cField\n id={company.id}\n placeholder={`Company ${company.id.split('-')[1]}`}\n type=\"text\"\n required\n // add the dynamic property \n dynamic\n // add the field property to add to the state state of the \u003cForm /\u003e component\n field={{\n id: `company-${highestAvailableId}`,\n type: 'text',\n required: true,\n }}\n onChange={(state) =\u003e this.addField(state, company.id)}\n /\u003e\n {companies.length \u0026\u0026 (\n \u003cButton\n id=\"removeField\"\n // add the rfpRole property\n rfpRole=\"removeField\"\n type=\"button\"\n // add the fieldId property to remove the field from the state of the \u003cForm /\u003e component\n fieldId={company.id}\n onClick={() =\u003e this.removeField(idx)}\n \u003e\n Remove Company\n \u003c/Button\u003e\n )}\n\n \u003c/div\u003e\n ))}\n \u003cdiv\u003e\n \u003cButton\n id=\"submit\"\n type=\"submit\"\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003e\n submit\n \u003c/Button\u003e\n \u003c/div\u003e\n \u003c/Form\u003e\n );\n }\n}\n\nexport { DynamicFieldsOnChange };\n```\n\nNow render this Component. Everytime you fill out the `\u003cField /\u003e` component you will add a new `\u003cField /\u003e`, and everytime you click on the button `Remove Company` you remove the corresponding field.\n\n## Dynamic Fields 3\n\nWhen you have a part of your form that consists of multiple fields that needs to be dynamic, e.g. `streetname` and `housenumber`. \u003eou can add multiple fields to the state of the `\u003cForm /\u003e` component by simle passing an array of objects to the `field` property instead of a single object. The same way you can remove multiple fields from state of the `\u003cForm /\u003e` component, by passing an array of strings to the `fieldId` property instead of a single string.\n\n### Add multiple dynamic fields to the state\n\nFirst off, import your components.\n\n```js\nimport React from 'react';\nimport {\n Form,\n Field,\n Button,\n} from 'react-form-package';\n```\n\nNow create your component:\n\n```jsx\nclass MultipleDynamicFields extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n companies: [\n {\n id: 'street-0',\n },\n ],\n };\n\n this.addField = this.addField.bind(this);\n this.removeField = this.removeField.bind(this);\n this.calculateAvailableId = this.calculateAvailableId.bind(this);\n }\n\n calculateAvailableId() {\n const {\n companies,\n } = this.state;\n\n const arr = companies.map((item) =\u003e parseInt(item.id.split('-')[1], 10));\n\n let currentHighestId = Math.max(...arr);\n currentHighestId = currentHighestId !== -Infinity ? currentHighestId : 0;\n\n const highestAvailableId = currentHighestId + 1;\n\n return highestAvailableId;\n }\n\n addField() {\n const {\n companies,\n } = this.state;\n\n const highestAvailableId = this.calculateAvailableId();\n\n this.setState({\n companies: companies.concat({ id: `street-${highestAvailableId}` }),\n });\n }\n\n removeField(idx) {\n const {\n companies,\n } = this.state;\n\n this.setState({\n companies: companies.filter((_, index) =\u003e idx !== index),\n });\n }\n\n render() {\n const {\n companies,\n } = this.state;\n\n const highestAvailableId = this.calculateAvailableId();\n\n return (\n \u003cForm\n validate\n \u003e\n {companies.map((street, idx) =\u003e (\n \u003cdiv\u003e\n \u003cdiv\u003e\n \u003cField\n id={`${street.id}`}\n placeholder=\"Street name\"\n type=\"text\"\n required\n /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cField\n id={`housenumber-${street.id.split('-')[1]}`}\n placeholder=\"House number\"\n type=\"number\"\n required\n /\u003e\n \u003c/div\u003e\n \u003cButton\n id=\"removeField\"\n rfpRole=\"removeField\"\n type=\"button\"\n // pass multiple fieldIds \n // in an array to the \n // fieldId\n fieldId={[\n `${street.id}`,\n `housenumber-${street.id.split('-')[1]}`,\n ]}\n onClick={() =\u003e this.removeField(idx)}\n \u003e\n Remove Company\n \u003c/Button\u003e\n \u003c/div\u003e\n ))}\n \u003cdiv\u003e\n \u003cButton\n id=\"addField\"\n rfpRole=\"addField\"\n type=\"button\"\n // pass multiple field objects \n // in an array to the \n // field property\n field={[\n {\n id: `street-${highestAvailableId}`,\n type: 'text',\n required: true,\n },\n {\n id: `housenumber-${highestAvailableId}`,\n type: 'number',\n required: true,\n },\n ]}\n onClick={() =\u003e this.addField()}\n \u003e\n Add Company Field\n \u003c/Button\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton\n id=\"submit\"\n type=\"submit\"\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003e\n submit\n \u003c/Button\u003e\n \u003c/div\u003e\n \u003c/Form\u003e\n );\n }\n}\n\nexport { MultipleDynamicFields };\n```\n\nNow lets render this component and see how you can add and remove multiple fields.\n\n## Bind Input Fields\n\nSometimes a input value depends on another input value, e.g. the use inputs a range of house numbers and you have to calculate the dependend household count. So that the user is able to skip some fields but is also able to chnage the value if the user knows it better.\n\n### Bind an input value to another input value\n\nTo handle such cases there are two properties available on the `\u003cField /\u003e`, the `\u003cRadioGroup /\u003e`, and the `\u003cSelect /\u003e` component.\n\nProperty | Type | Required | Default | Description\n---|---|---|---|---\nbindTo | String, Array | false | | the `id`/`ids` of the field/fields you want to manipulate\nbindToCallback | Func | false | | the callback to set the target's (`bindTo`) input value, which gets called `onChange`\n\n#### Basic Usage\n\nIn our example we bind our first `housenumbers` input to the second `households` input. As long as the bound input field (`bindTo`, in our example the households field) is untouched (not blurred) the `binToCallback` will be executed `onChange` of the field where we have the `bindTo` and `bindToCallback` properties. The `bindToCallback` expects a String as return value, and gets the input value of the current input field `housenumbers`.\n\n```jsx\n\u003cForm\u003e\n \u003cdiv\u003e\n \u003cdiv\u003e\n House numbers:\n \u003c/div\u003e\n \u003cField\n id=\"housenumbers\"\n type=\"text\"\n placeholder=\"2-7\"\n // bind this field to field with id `households`\n bindTo=\"households\"\n // when this field changes set the value of the\n // bound field (`households`) to the result of\n // this function, either a string or a boolean\n bindToCallback={\n (value) =\u003e {\n const numbers = value.includes('-')\n ? value.split('-')\n : value;\n\n if (!Array.isArray(numbers)) {\n return '1';\n }\n\n const number1 = parseInt(numbers[0]);\n const number2 = parseInt(numbers[1]);\n\n if (!number2 || number2 === number1) {\n return '1';\n }\n\n if (number2 \u003c number1) {\n return '0';\n }\n\n const households = (number2 - number1 + 1).toString();\n\n return households;\n }\n }\n /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003e\n Households:\n \u003c/div\u003e\n \u003cField \n id=\"households\"\n type=\"number\"\n placeholder=\"6\"\n /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton\n id=\"submit\"\n type=\"submit\"\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003e\n Submit\n \u003c/Button\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n```\n\n## Bind Input Fields 2\n\nSometimes it is not enough to bind the the value of an input field to just one single different input field. So you can also pass an array of ids to the `bindTo` prop. As we learned in the [Bind Input Fields](#bind-input-fields) chapter, the `bindToCallback` is only triggered when the input field to which it is bound was not touched (blurred) yet. This sometimes has a problematic effect, e.g. if you have a select input to choose a email template, but everytime the user switches the select option, the template should be switched, even if the user touched one of the fields it was bound to. This can be achieved if you set a property called `bindToAlways`. If you return a single value from the `bindToCallback` every bound field will be populated with this value. If you want to have different values for each binding thn you can return an array of values. The binding will be in the same order as the order of the `bindTo` array. If the length of the array of the return value of the `bindToCallback` does not match the length of the `bindTo` ids, only the fields with an return value will be populated.\n\n### Bind an input value to another input value\n\nTo handle such cases there are two properties available on the `\u003cField /\u003e`, the `\u003cRadioGroup /\u003e`, and the `\u003cSelect /\u003e` component.\n\nProperty | Type | Required | Default | Description\n---|---|---|---|---\nbindTo | String, Array | false | | the `id`/`ids` of the field/fields you want to manipulate\nbintToAllways | Bool | false | | only needed if you want that the bindToCallback is triggered even the bound input field was already touched (blurred)\nbindToCallback | Func | false | | the callback to set the target's (`bindTo`) input value, which gets called `onChange`\n\n### Basic Usage\n\nIn our example we use `Select` input to choose between different email templates.\n\n```js\n\u003cForm\u003e\n \u003cdiv\u003e\n \u003cdiv\u003e\n Email Template:\n \u003c/div\u003e\n \u003cSelect\n id=\"emailTemplate\"\n bindTo={[\n 'subject',\n 'body',\n ]}\n bindToAlways\n bindToCallback={(value) =\u003e {\n if(value === 'friends') {\n return [\n 'What\\'s up?', // subject as it appears first in the `bindTo` prop\n 'Just take a look at this meme...', // body as it appears second in the `bindTo` prop\n ];\n }\n\n return [\n 'Weekly report',\n 'Dear Boss,\\n\\n...\\n...\\n...',\n ];\n }}\n \u003e\n \u003coption disabled value=\"\"\u003e\n --- Select an email template ---\n \u003c/option\u003e\n \u003coption value=\"friends\"\u003eFriends\u003c/option\u003e\n \u003coption value=\"boss\"\u003eBoss\u003c/option\u003e\n \u003c/Select\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003e\n Subject:\n \u003c/div\u003e\n \u003cField\n id=\"subject\"\n type=\"text\"\n /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv\u003e\n Body:\n \u003c/div\u003e\n \u003cField\n id=\"body\"\n type=\"textarea\"\n rows=\"5\"\n cols=\"40\"\n /\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton\n id=\"submit\"\n type=\"submit\"\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003e\n Submit\n \u003c/Button\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n```\n\n## onFocus, onChange, onBlur\n\n\u003e get access to the state everytime the user interacts with your form\n\nSometimes, access to the forms state is needed even before the user submits the form. This can be if you want to store the forms state on the server on every change (e.g. every time the user changes a input or everytime the user blurs an input) or you want to check if the users input is already taken (e.g. a user might not be allowed to use a email or a username that is already taken and you want to give the user a fast respond before the user even submits the form).\n\nYou are not able to modify the state on this callbacks since `react-form-package` takes care of the state management, but you can use the state to communicate with a server or change the UI corresponding to the current state. If you have an edge case where you have to modify the state of the input use `preOnChange` (see [State Manipulation](#state-manipulation)).\n\n### onFocus\n\n```jsx\nimport {\n Form,\n Field,\n} from 'react-form-package';\n```\n\nRender a `\u003cForm /\u003e` with an email `\u003cField /\u003e` component and a `onFocus` property.\n\n```jsx\n \u003cForm\u003e\n {/* do something with the state onFocus */}\n \u003cField\n id=\"email\"\n type=\"email\"\n value=\"test@example.com\"\n onFocus={(state) =\u003e console.log(state)}\n /\u003e\n \u003c/Form\u003e\n```\n\n### onChange\n\n```jsx\nimport {\n Form,\n Field,\n} from 'react-form-package';\n```\n\nRender a `\u003cForm /\u003e` with an email `\u003cField /\u003e` component and a `onChange` property.\n\n```jsx\n \u003cForm\u003e\n {/* do something with the state onChange */}\n \u003cField\n id=\"email\"\n type=\"email\"\n value=\"test@example.com\"\n onChange={(state) =\u003e console.log(state)}\n /\u003e\n \u003c/Form\u003e\n```\n\n### onBlur\n\n```jsx\nimport {\n Form,\n Field,\n} from 'react-form-package';\n```\n\nRender a `\u003cForm /\u003e` with an email `\u003cField /\u003e` component and a `onBlur` property.\n\n```jsx\n \u003cForm\u003e\n {/* do something with the state onBlur */}\n \u003cField\n id=\"email\"\n type=\"email\"\n value=\"test@example.com\"\n onBlur={(state) =\u003e console.log(state)}\n /\u003e\n \u003c/Form\u003e\n```\n\n## Third Party Components\n\n\u003e Working with third party components\n\nSometimes you need to work with third party components to make something work properly, e.g. you need an autocompletion. This `react-form-package` does not provide an autocompletion by default, but luckily you can use third party components within `react-form-package` and keep all the functionality.\n\nTo give you an example of how to create a autocompletion form we use [downshift](https://github.com/paypal/downshift#readme).\n\n`react-form-package` has a `\u003cFieldWrapper /\u003e` component. This component exposes four props to the child component: `onFocus`, `onBlur`, `onChange` and `meta`.\n\nThis props are functions that takes exactly one argument: `value`. Which should be a `string` for input fields or a `boolean` for a checkbox.\n\n## Autocomplete\n\nFirst off, import your components.\n\n```js\nimport React from 'react';\nimport Downshift from 'downshift';\nimport {\n FormControl,\n Label,\n} from 'styled-bootstrap-components';\n```\n\nThe next step is to create a `Autocomplete` component.\n\nWe use the standard example from the [downshift](https://github.com/paypal/downshift#readme) documentation.\n\nWe use the exposed function props to change the state of the `\u003cForm /\u003e`. Take a look at the `onChange` function of the `\u003cDownshift /\u003e` component, or the `onFocus` and `onBlur` function on the input component, or the `meta` data used on the `\u003cFormControl /\u003e` component.\n\n```jsx\n// ./Autocomplete.js\n\nconst items = [\n { value: 'apple' },\n { value: 'pear' },\n { value: 'orange' },\n { value: 'grape' },\n { value: 'banana' },\n];\n\nconst Autocomplete = (props) =\u003e (\n \u003cDownshift\n // here we are using the onChange function\n onChange={(item) =\u003e props.onChange(item.value)}\n itemToString={(item) =\u003e (item ? item.value : '')}\n \u003e\n {({\n getInputProps,\n getItemProps,\n getLabelProps,\n getMenuProps,\n isOpen,\n inputValue,\n highlightedIndex,\n selectedItem,\n }) =\u003e (\n \u003cdiv\u003e\n \u003cLabel {...getLabelProps()}\u003eEnter a fruit: \u003c/Label\u003e\n \u003cFormControl\n {...getInputProps({\n // here we are using the onFocus and onBlur function\n onFocus: (e) =\u003e props.onFocus(e.target.value),\n onBlur: (e) =\u003e props.onBlur(e.target.value),\n placeholder: 'apple',\n })}\n // here we are using the meta data\n valid={props.meta.touched ? props.meta.valid : undefined}\n invalid={props.meta.touched ? props.meta.invalid : undefined}\n /\u003e\n \u003cul {...getMenuProps()}\u003e\n {isOpen\n ? items\n .filter((item) =\u003e !inputValue || item.value.includes(inputValue))\n .map((item, index) =\u003e (\n \u003cli\n {...getItemProps({\n key: item.value,\n index,\n item,\n style: {\n backgroundColor:\n highlightedIndex === index ? 'lightgray' : 'white',\n fontWeight: selectedItem === item ? 'bold' : 'normal',\n },\n })}\n \u003e\n {item.value}\n \u003c/li\u003e\n ))\n : null}\n \u003c/ul\u003e\n \u003c/div\u003e\n )}\n \u003c/Downshift\u003e\n);\n\nexport { Autocomplete };\n```\n\nNow we have to import all components that we need and use our `\u003cFieldWrapper /\u003e` component inside the `\u003cForm /\u003e` component.\n\n```js\nimport React from 'react';\nimport { Autocomplete } from './Autocomplete';\nimport {\n Form,\n FieldWrapper,\n Button,\n} from 'react-form-package';\n```\n\nIf you visit the focus and blur the input now there will be a error message, telling you that this field is required. If you type something and select a fruit from the autocompletion you will be able to submit the form. If the field was touched and the field is invalid it will use a red border, if the field was touched and the field is valid it will use a green border.\n\n```jsx\n\u003cForm\n validate\n\u003e\n \u003cdiv\u003e\n \u003cFieldWrapper type=\"text\" id=\"autocomplete\" required\u003e\n \u003cAutocomplete /\u003e\n \u003c/FieldWrapper\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cButton \n type=\"submit\"\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003e\n Submit\n \u003c/Button\u003e\n \u003c/div\u003e\n\u003c/Form\u003e\n```\n\n## File Upload\n\nSometimes you need to upload files with your form, e.g. if you want to upload a profile picture for a user.\n\nUse a `\u003cField /\u003e` with the type `file` and you will get the `FileList` object back as value in the `data` object.\n\n```jsx\n\u003cForm\n validate\n enctype=\"multipart/form-data\"\n\u003e\n \u003cField type=\"file\" id=\"profilePicture\" required /\u003e\n \u003cButton\n id=\"submit\"\n type=\"submit\"\n onClick={(state) =\u003e {\n alert(JSON.stringify(state, null, 2));\n alert('open the console to see the whole state...');\n console.log(state);\n }}\n \u003e\n Submit\n \u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n## Why?\n\n\u003e TL;DR: I wanted a form with inbuilt validation and state management that a developer can use only by knowing HTML\n\nForms! A pain in the ass for a user when they are not well developed. Mostly because developing forms is a pain in the ass too.\n\nWhy is developing good forms not easy?\n\nBecause\n\n* of a lot of communication between the user and the program\n* there are a lot of changes in the state of a program\n* of the validation of the user input\n\nI wanted a form that a developer can use only by knowing HTML. Most frontend developers know how a valid HTML form looks like on first sight but no frontend developer knows how a JavaScript library works when its been used for the first time. That is the reason why `react-form-package` was created. By using `react-form-package` you create a similar structure to a valid HTML form. Thats it. Input validation, form state management, and user communication is all handled by `react-form-package`.\n\n### Why not use formik or react-final-form\n\nMost of the `form libraries` I found were using `render props` or `higher order components`, which is not a ideal set up for a form because when the forms are getting more complex the more confusing the code will get. A form should be declarative, and what is more declartive than a plain HTML form? Not a `render prop hell` or `higher order confusion`. Also I did not find any library that came with an inbuilt validation system. Why do you need this? You should not consider writing your own validations if an email is always validated the same way, or the structure of a url is always the same. Writing your validations yourself can mislead you to produce duplicate code and this could lead to more bugs. What is also important: being flexible with styling. This is also not always easy with libararies. `react-form-package` only brings the logic and you choose how to style it. `CSS-in-JS`, `CSS`, or the `style prop`, it is up to you.\n\n## License\n\nMIT © Lukas Aichbauer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faichbauer%2Freact-form-package","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faichbauer%2Freact-form-package","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faichbauer%2Freact-form-package/lists"}