{"id":13422406,"url":"https://github.com/data-driven-forms/react-forms","last_synced_at":"2026-03-09T11:10:13.700Z","repository":{"id":37752106,"uuid":"179020919","full_name":"data-driven-forms/react-forms","owner":"data-driven-forms","description":"React library for rendering forms.","archived":false,"fork":false,"pushed_at":"2026-03-05T12:15:17.000Z","size":23299,"stargazers_count":324,"open_issues_count":39,"forks_count":96,"subscribers_count":12,"default_branch":"master","last_synced_at":"2026-03-05T13:56:07.753Z","etag":null,"topics":["components","datadriven","form-validation","forms","hacktoberfest","javascript","react"],"latest_commit_sha":null,"homepage":"https://data-driven-forms.org/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/data-driven-forms.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-04-02T07:18:00.000Z","updated_at":"2026-03-05T09:52:49.000Z","dependencies_parsed_at":"2022-07-14T08:08:58.586Z","dependency_job_id":"23a23905-1fa0-484e-914d-85ca8656fd55","html_url":"https://github.com/data-driven-forms/react-forms","commit_stats":{"total_commits":2269,"total_committers":49,"mean_commits":46.30612244897959,"dds":0.497576024680476,"last_synced_commit":"26119e09ad9e7d59d6a90f2fc8b3d7ed0dcee45f"},"previous_names":[],"tags_count":458,"template":false,"template_full_name":null,"purl":"pkg:github/data-driven-forms/react-forms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-driven-forms%2Freact-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-driven-forms%2Freact-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-driven-forms%2Freact-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-driven-forms%2Freact-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/data-driven-forms","download_url":"https://codeload.github.com/data-driven-forms/react-forms/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-driven-forms%2Freact-forms/sbom","scorecard":{"id":323961,"data":{"date":"2025-08-11","repo":{"name":"github.com/data-driven-forms/react-forms","commit":"6b722bc76fc89d8fae51fa0cc115313cd83a0a41"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.9,"checks":[{"name":"Code-Review","score":3,"reason":"Found 5/14 approved changesets -- score normalized to 3","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":"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":1,"reason":"0 commit(s) and 2 issue activity found in the last 90 days -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/main.yml:1","Info: no jobLevel write permissions found"],"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":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","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":"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":"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":"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":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: Apache License 2.0: 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":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/data-driven-forms/react-forms/main.yml/master?enable=pin","Info:   0 out of   1 third-party GitHubAction dependencies pinned"],"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":"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":"Signed-Releases","score":0,"reason":"Project has not signed or included provenance with any releases.","details":["Warn: release artifact v4.1.1 not signed: https://api.github.com/repos/data-driven-forms/react-forms/releases/216734782","Warn: release artifact v4.1.0 not signed: https://api.github.com/repos/data-driven-forms/react-forms/releases/216675659","Warn: release artifact v4.0.1 not signed: https://api.github.com/repos/data-driven-forms/react-forms/releases/207785047","Warn: release artifact v4.0.0 not signed: https://api.github.com/repos/data-driven-forms/react-forms/releases/188873944","Warn: release artifact v3.23.5 not signed: https://api.github.com/repos/data-driven-forms/react-forms/releases/187348007","Warn: release artifact v4.1.1 does not have provenance: https://api.github.com/repos/data-driven-forms/react-forms/releases/216734782","Warn: release artifact v4.1.0 does not have provenance: https://api.github.com/repos/data-driven-forms/react-forms/releases/216675659","Warn: release artifact v4.0.1 does not have provenance: https://api.github.com/repos/data-driven-forms/react-forms/releases/207785047","Warn: release artifact v4.0.0 does not have provenance: https://api.github.com/repos/data-driven-forms/react-forms/releases/188873944","Warn: release artifact v3.23.5 does not have provenance: https://api.github.com/repos/data-driven-forms/react-forms/releases/187348007"],"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":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 23 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":"62 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","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-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","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-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","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-35jh-r3h4-6jhm","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-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-r2fc-ccr8-96c4","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","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-hj9c-8jmm-8c52","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-8g77-54rh-46hx","Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4","Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2","Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-325j-24f4-qv5x","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-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-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","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-18T02:02:54.011Z","repository_id":37752106,"created_at":"2025-08-18T02:02:54.011Z","updated_at":"2025-08-18T02:02:54.011Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30291905,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T02:57:19.223Z","status":"ssl_error","status_checked_at":"2026-03-09T02:56:26.373Z","response_time":61,"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":["components","datadriven","form-validation","forms","hacktoberfest","javascript","react"],"created_at":"2024-07-30T23:00:44.061Z","updated_at":"2026-03-09T11:10:13.685Z","avatar_url":"https://github.com/data-driven-forms.png","language":"JavaScript","readme":"[![codecov](https://codecov.io/gh/data-driven-forms/react-forms/branch/master/graph/badge.svg)](https://codecov.io/gh/data-driven-forms/react-forms)\n[![CircleCI](https://circleci.com/gh/data-driven-forms/react-forms/tree/master.svg?style=svg)](https://circleci.com/gh/data-driven-forms/react-forms/tree/master)\n[![npm version](https://badge.fury.io/js/%40data-driven-forms%2Freact-form-renderer.svg)](https://badge.fury.io/js/%40data-driven-forms%2Freact-form-renderer)\n[![Tweet](https://img.shields.io/twitter/url/https/github.com/tterb/hyde.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20DataDrivenForms%20React%20library%21%20https%3A%2F%2Fdata-driven-forms.org%2F\u0026hashtags=react,opensource,datadrivenforms)\n[![Twitter Follow](https://img.shields.io/twitter/follow/DataDrivenForms.svg?style=social)](https://twitter.com/DataDrivenForms)\n\n[![Data Driven Form logo](https://raw.githubusercontent.com/data-driven-forms/react-forms/master/images/logo.png)](https://data-driven-forms.org/)\n\nData Driven Forms is a React library used for rendering and managing forms with a lot of provided features based on [React Final Form](https://github.com/final-form/react-final-form).\n\n:question: Why to use Data Driven Forms? :question:\n- All forms **shared** the same **functionality**!\n- Components are **controlled** in **one place**!\n- You can **easily migrate** to different sets of components!\n- All **functionality** is **provided** (see below!)\n\n:tada: Features :tada:\n- **Easily readable schema**, you don't need to know any HTML or JS to be able to write your own form schemas!\n- You can use your **own components** or use one of our **provided mappers**: [PatternFly 4](https://patternfly-react.surge.sh/patternfly-4/), [Material-UI](https://mui.com/), [Ant Design](https://ant.design/)! and more, see below!)\n- **Form state manager** out-of-the-box (including error states!)\n- Fully **customizable** (you can use your own buttons, actions, etc.)!\n- **Conditional** fields!\n- Custom field **validation** with basic set included!\n- **Datatype** validation!\n- **Cross-field** validation!\n- **Asynchronous** validation supported!\n- Supporting **Wizard** forms!\n- Supporting **[Final Form Field Array](https://github.com/final-form/react-final-form-arrays)!**\n- ... and a lot more!\n\n:book: For more information please visit the [documentation](https://data-driven-forms.org/). :book:\n\n**Table of Contents**\n\n- [Installation](#installation)\n  - [React Form Renderer](#react-form-renderer)\n  - [Provided mappers](#provided-mappers)\n    - [Material-UI Mapper](#material-ui-mapper)\n    - [PatternFly 4 Mapper](#patternfly-4-mapper)\n    - [BlueprintJS Mapper](#blueprintjs-mapper)\n    - [Semantic UI Mapper](#semantic-ui-mapper)\n    - [Ant Design Mapper](#ant-design-mapper)\n    - [Carbon Mapper](#carbon-mapper)\n  - [Basic provided components](#basic-provided-components)\n- [Usage](#usage)\n  - [Custom mapper](#custom-mapper)\n- [Documentation](#documentation)\n- [Development setup](#development-setup)\n  - [Requirements](#requirements)\n  - [Common commands](#common-commands)\n    - [Install](#install)\n    - [Build](#build)\n    - [Run a playground](#run-a-playground)\n    - [Run documentation](#run-documentation)\n    - [How to clean node_modules](#how-to-clean-node_modules)\n    - [Cleaning built files](#cleaning-built-files)\n    - [Tests](#tests)\n  - [Checklist before you send a PR](#checklist-before-you-send-a-pr)\n    - [Build passes](#build-passes)\n    - [Linter passes](#linter-passes)\n    - [Write tests](#write-tests)\n    - [Documentation update](#documentation-update)\n    - [Correct commit message](#correct-commit-message)\n- [Useful links](#useful-links)\n- [Contribution](#contribution)\n- [LICENSE](#license)\n\n# Installation\n\n## [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)\n\n```console\n$ npm install @data-driven-forms/react-form-renderer -S\n```\n\n```console\n$ yarn add @data-driven-forms/react-form-renderer\n```\n\n## Provided mappers\n\n\n### [Material-UI Mapper](https://data-driven-forms.org/mappers/mui-component-mapper)\n\n```console\n$ npm install @data-driven-forms/mui-component-mapper -S\n```\n\n```console\n$ yarn add @data-driven-forms/mui-component-mapper\n```\n\n### [PatternFly 4 Mapper](https://data-driven-forms.org/mappers/pf4-component-mapper)\n\n```console\n$ npm install @data-driven-forms/pf4-component-mapper -S\n```\n\n```console\n$ yarn add @data-driven-forms/pf4-component-mapper\n```\n\n### [BlueprintJS Mapper](https://data-driven-forms.org/mappers/blueprint-component-mapper)\n\n```console\n$ npm install @data-driven-forms/blueprint-component-mapper -S\n```\n\n```console\n$ yarn add @data-driven-forms/blueprint-component-mapper\n```\n\n### [Semantic UI Mapper](https://data-driven-forms.org/mappers/suir-component-mapper)\n\n```console\n$ npm install @data-driven-forms/suir-component-mapper -S\n```\n\n```console\n$ yarn add @data-driven-forms/suir-component-mapper\n```\n\n### [Ant Design Mapper](https://data-driven-forms.org/mappers/ant-component-mapper)\n\n```console\n$ npm install @data-driven-forms/ant-component-mapper -S\n```\n\n```console\n$ yarn add @data-driven-forms/ant-component-mapper\n```\n\n### [Carbon Mapper](https://data-driven-forms.org/mappers/carbon-component-mapper)\n\n```console\n$ npm install @data-driven-forms/carbon-component-mapper -S\n```\n\n```console\n$ yarn add @data-driven-forms/carbon-component-mapper\n```\n\nComponent libraries in mappers are external dependencies. Make sure to install them and their styles in your bundles.\n\n## Basic provided components\n\nProvided mappers of Data Driven Forms support contains following set of components:\n\n- [Text input](https://data-driven-forms.org/mappers/text-field?mapper=mui)\n- [Text area](https://data-driven-forms.org/mappers/textarea?mapper=mui)\n- [Checkbox](https://data-driven-forms.org/mappers/checkbox?mapper=mui) ([Multiple checkboxes](https://data-driven-forms.org/mappers/checkbox-multiple?mapper=mui))\n- [Select (dropdown)](https://data-driven-forms.org/mappers/select?mapper=mui)\n- [Dual list select](https://data-driven-forms.org/mappers/dual-list-select?mapper=mui)\n- [Field array](https://data-driven-forms.org/mappers/field-array?mapper=mui)\n- [Switch](https://data-driven-forms.org/mappers/switch?mapper=mui)\n- [Radio buttons](https://data-driven-forms.org/mappers/radio?mapper=mui)\n- [Date picker](https://data-driven-forms.org/mappers/date-picker?mapper=mui)\n- [Time picker](https://data-driven-forms.org/mappers/time-picker?mapper=mui)\n- [Tabs](https://data-driven-forms.org/mappers/tabs?mapper=mui)\n- [Slider](https://data-driven-forms.org/mappers/slider?mapper=mui)\n- [Sub-form](https://data-driven-forms.org/mappers/sub-form?mapper=mui)\n- [Plain text](https://data-driven-forms.org/mappers/plain-text?mapper=mui)\n- [Wizard](https://data-driven-forms.org/mappers/wizard?mapper=mui)\n\nAny other components can be added to mapper and renderer with the form renderer. Existing components can be also overriden.\n\n# Usage\n\nIn order to Data Driven Forms in your component you need the renderer and a component mapper, which provides component mapper and form template.\n\n```jsx\nimport React from 'react';\nimport { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';\nimport { componentMapper, FormTemplate } from '@data-driven-forms/pf4-component-mapper';\n\nconst schema = {\n  fields: [{\n    component: componentTypes.TEXT_FIELD,\n    name: 'name',\n    label: 'Your name'\n  }]\n}\n\nconst Form = () =\u003e (\n  \u003cFormRenderer\n    schema={schema}\n    componentMapper={componentMapper}\n    FormTemplate={FormTemplate}\n    onSubmit={console.log}\n  /\u003e\n)\n```\n\n## Custom mapper\n\nYou can also use custom mapper.\n\n```jsx\nimport React from 'react';\nimport { FormRenderer, componentTypes, useFieldApi } from '@data-driven-forms/react-form-renderer';\n\nconst TextField = props =\u003e {\n  const {label, input, meta, ...rest} = useFieldApi(props)\n  return (\n    \u003cdiv\u003e\n      \u003clabel htmlForm={input.name}\u003e{label}\u003c/label\u003e\n      \u003cinput {...input} {...rest} id={input.name}/\u003e\n      {meta.error \u0026\u0026 \u003cp\u003e{meta.error}\u003c/p\u003e}\n    \u003c/div\u003e\n  )\n}\n\nconst componentMapper = {\n  [componentTypes.TEXT_FIELD]: TextField,\n  'custom-type': TextField\n}\n\nconst schema = {\n  fields: [{\n    component: componentTypes.TEXT_FIELD,\n    name: 'name',\n    label: 'Your name'\n    type: 'search',\n  }]\n}\n```\n\nFor more information, please check [this page](https://data-driven-forms.org/renderer/component-mapping).\n\nMappers can be also generated by using `yarn generate-template` [command](https://data-driven-forms.org/renderer/development-setup#generatingamappertemplate).\n\n# Documentation\n\nPlease use our [documentation site](https://data-driven-forms.org/). In case of any problem, you can access documentation files directly in GitHub.\n\n# Development setup\n\nData Driven Forms is a monorepo that uses [NX](https://nx.dev/) and [yarn workspaces](https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/), so you can use all its commands as well.\n\n---\n\n## Requirements\n\n- **○ NodeJS 16**\n\n- **○ Unix like OS (MacOS, Linux)**\n\nWe do not support developing on Windows at this moment. However, we would welcome any PR to change this.\n\n---\n\n## Common commands\n\n### Install\n\n```bash\nyarn install\n```\n\n### Build\n\n```bash\nyarn build\n```\n\nAll packages are linked together by default, so if you run a `yarn build` in a package, all other packages are updated to the latest version of that package. A package has to be built first before it is used in other package.\n\n### Run a playground\n\nEach package has a small playground `package/demo`, where you can test your changes.\n\n```bash\ncd packages/pf4-component-mapper\nyarn start\n```\n\n### Run documentation\n\nThe documentation is a server-side rendered React application based on [NextJS framework](https://nextjs.org/).\n\n```bash\ncd packages/react-renderer-demo\nyarn dev\n```\n\n### How to clean node_modules\n\n```bash\nnx reset\nrm -rf node_modules\n```\n### Cleaning built files\n\nTo clean built files use following command: (This script is also ran automatically before each build.)\n\n```bash\nyarn clean-build\n```\n\n### Tests\n\nTests can be ran from core folder or from specific package.\n\n```bash\nyarn test\n\nyarn test --watchAll packages/pf4-component-mapper\n\n# or\n\ncd packages/pf4-component-mapper\nyarn test\n```\n\n---\n\n## Checklist before you send a PR\n\nPlease follow following checklist if you are going to open a PR. It will help you make the PR finished.\n\n### Build passes\n\nRun `yarn build` in root folder to build all packages. You can run this command only in package you changed. All packages are linked by default, you have to build them first.\n\n### Linter passes\n\nRun `yarn lint` in root folder to check if the code is correctly formatted. You can use `yarn lint --fix` to automatically correct issues.\n### Write tests\n\nAll new code should be properly tested. Run `yarn test` in root folder to test all files. Check codecoverage report to see uncovered lines of code. We are using [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).\n\n### Documentation update\n\nIf you introduce a new feature, you should document this change in our documentation. The documentation is located in `react-renderer-demo` package and it is a web application based on [NextJS](https://nextjs.org/). We do not write tests for the documentation.\n\n`yarn dev` starts a local version of the documentation.\n\n`yarn build` prepares files for deployment.\n\n`yarn serve` emulates the web application running in local emulator.\n\n### Correct commit message\n\nA correct commit message is important, because we are using [nx release](https://nx.dev/features/manage-releases) with conventional commits to automatically release new versions. These messages are also used in our release notes, so other users can see what is being changed.\n\n**My change introduces a new feature**\n\nPrefix your commit message with `feat` and specify the package that is being changed. An example: `feat(pf4): a new dual list integration`. If you change multiple packages, you can use `feat(common): ...` or `feat(all): ...`.\n\n**My change fixes a bug or technical debt**\n\nPrefix your commit message with `fix`. Otherwise, the same rules apply. An example: `fix(pf4): fixed missed proptype in select`.\n\n**My change does not change any released package**\n\nIf your change does not change any of the released packages, you can simple just descibe the change, an example: `Fix button on documenation example page`. This also applies for any change in the documentation repo.\n\n**My change introduces a breaking change**\n\nWe are trying to avoid breaking changes. Please, open an issue and discuss the issue with us, we will try to come up with alternative options.\n\n---\n\n# Useful links\n\n- [Data Driven Forms documentation](https://data-driven-forms.org/)\n- [PatternFly 4 Design documentation](https://www.patternfly.org/v4/)\n- [Material-UI documentation](https://mui.com/)\n- [Ant Design documentation](https://ant.design/)\n- [Semantic UI React](https://react.semantic-ui.com/)\n- [BlueprintJS](https://blueprintjs.com/)\n- [IBM Carbon](https://www.carbondesignsystem.com/)\n- NPM\n  - [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)\n  - [PatternFly 4 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf4-component-mapper)\n  - [MaterialUI Mapper](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper)\n  - [Ant Design Mapper](https://www.npmjs.com/package/@data-driven-forms/ant-component-mapper)\n  - [Semantic UI Mapper](https://www.npmjs.com/package/@data-driven-forms/suir-component-mapper)\n  - [BlueprintJS Mapper](https://www.npmjs.com/package/@data-driven-forms/blueprint-component-mapper)\n  - [Carbon Mapper](https://www.npmjs.com/package/@data-driven-forms/carbon-component-mapper)\n\n# Contribution\n\nWe welcome any community contribution. Don't be afraid to report bug or to create issues and pull-requests! :trophy:\n\n# LICENSE\n\nApache License 2.0\n\n","funding_links":[],"categories":["Code Design","JavaScript"],"sub_categories":["Form Logic"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdata-driven-forms%2Freact-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdata-driven-forms%2Freact-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdata-driven-forms%2Freact-forms/lists"}