{"id":20101746,"url":"https://github.com/codemaskinc/react-form-builder-v2","last_synced_at":"2025-05-06T06:33:45.568Z","repository":{"id":65651120,"uuid":"409219272","full_name":"codemaskinc/react-form-builder-v2","owner":"codemaskinc","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-13T11:59:52.000Z","size":32375,"stargazers_count":2,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-10T08:37:45.766Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codemaskinc.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}},"created_at":"2021-09-22T13:39:02.000Z","updated_at":"2024-07-11T18:21:45.000Z","dependencies_parsed_at":"2024-05-07T08:46:19.363Z","dependency_job_id":null,"html_url":"https://github.com/codemaskinc/react-form-builder-v2","commit_stats":{"total_commits":56,"total_committers":5,"mean_commits":11.2,"dds":0.1964285714285714,"last_synced_commit":"4001900864145ed2594b6913a476e4e3409cbf9e"},"previous_names":["codegateinc/react-form-builder-v2"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemaskinc%2Freact-form-builder-v2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemaskinc%2Freact-form-builder-v2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemaskinc%2Freact-form-builder-v2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemaskinc%2Freact-form-builder-v2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codemaskinc","download_url":"https://codeload.github.com/codemaskinc/react-form-builder-v2/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224493753,"owners_count":17320564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T17:26:35.168Z","updated_at":"2024-11-13T17:26:35.695Z","avatar_url":"https://github.com/codemaskinc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://cdn.codegate.pl/react-form-builder-v2/react-form-builder-v2.png\" width=\"400\"/\u003e\n\u003c/p\u003e\n\n## \u003ca href='https://www.typescriptlang.org/'\u003e\u003cimg src='https://badges.frapsoft.com/typescript/code/typescript.png?v=101' alt='typescript' height=20/\u003e\u003c/a\u003e \u003ca href='http://opensource.org/licenses/MIT'\u003e\u003cimg src='http://img.shields.io/badge/license-MIT-brightgreen.svg' alt='MIT' /\u003e\u003c/a\u003e \u003ca href=\"https://badge.fury.io/js/@codegateinc%2Freact-form-builder-v2\"\u003e\u003cimg src=\"https://badge.fury.io/js/@codegateinc%2Freact-form-builder-v2.svg\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e\n\nReact-form-builder-v2 is a library that allows you to create highly customizable forms by rendering your own components and storing the state. It works perfectly with ReactJS, React Native, and monorepo with React Native Web.\n\nCreate your own components and simply pass callbacks, errors, and values. You can store any type of value in the useField. It can be a string, boolean, number, array, or even an object.\n\n### Features\n\n- Fully working on hooks\n- Relies only on react and ramda\n- Highly customizable components\n- Well typed (Typescript)\n\n### [Live demo](https://codesandbox.io/embed/focused-firefly-j96uom)\n\n## Install\n`yarn add @codegateinc/react-form-builder-v2` or `npm install --save @codegateinc/react-form-builder-v2`\n\n## Hooks\n\n### useField\n\n```typescript\ntype ValidationRule\u003cT\u003e = {\n    errorMessage: string,\n    validate(value: T): boolean\n}\n\nuseField(config)\n```\n\n#### useField config\n\n| Property        | Type                       | Description                                                                                                                               |\n|-----------------|----------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|\n| key             | string                     | Default: `undefined`.\u003cbr\u003e This field is required, must be a unique within whole form.                                                     |\n| label           | string                     | Default: `undefined`.\u003cbr\u003e The label value that will be passed through the field.                                                          |\n| initialValue    | generic (T)                | Default: `undefined`.\u003cbr\u003e This field is required. This will define the initial value of the field.                                        |\n| isRequired      | boolean                    | Default: `false`.\u003cbr\u003e Defines if the field is required and should be mandatory. With `validation rules` it can be additionally validated. |\n| placeholder     | string                     | Default: `undefined`.\u003cbr\u003e Placeholder value that will be passed via the field                                                             |\n| validateOnBlur  | boolean                    | Default: `false`.\u003cbr\u003e Defines if the field should be validated when blurred. If false, validation will be checked on each change.         |\n| validationRules | Array\u003cValidationRule`\u003cT\u003e`\u003e | Default: `undefined`.\u003cbr\u003e Array of validation objects that will define if the field is valid                                              |\n| liveParser      | (value: T) =\u003e T            | Default: `undefined`.\u003cbr\u003e Function that, if defined, will be invoked every time the value changes.                                        |\n| submitParser    | (value: T) =\u003e T            | Default: `undefined`.\u003cbr\u003e Function that, if defined, will be invoked after the submit function is invoked.                                |\n| hasError        | boolean                    | Default: `false`.\u003cbr\u003e This value indicates if the field has an error.                                                                     |\n\n#### validationRules example\n\n```typescript\nvalidationRule: [\n    {\n        errorMessage: 'this field should be at least 2 chars',\n        validate: (value: string) =\u003e value.length \u003e= 2\n    }\n]\n```\n\n### useForm\n\n```typescript\nconst statesAndFunctions = useForm(config, callbacks)\n```\n\n#### States and functions\n| Property             | Type                                        | Description                                                                                                                                                      |\n|----------------------|---------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| form                 | Record\u003cstring, T\u003e                           | Form with all values.                                                                                                                                            |\n| hasError             | boolean                                     | Indicates if the form has an error.                                                                                                                              |\n| isFilled             | boolean                                     | Determines whether or not all fields have changed.                                                                                                               |\n| formHasChanges       | () =\u003e boolean                               | Returns a boolean indicating whether any fields have changed.                                                                                                    |\n| setError             | (key: string, errorMessage: string) =\u003e void | Sets an error to a field, even if the field is valid. After revalidation, this error disappears. It can be useful for server-side validation.                    |\n| setFieldValue        | (key: string, value: T) =\u003e void             | Sets the field value.                                                                                                                                            |\n| setFieldInitialValue | (key: string, initialValue: string) =\u003e void | Sets a field's initial value. The value of the field will change if it is pristine.                                                                              |\n| addFields            | (fields: Array`\u003cField\u003cany\u003e\u003e`) =\u003e void       | Adds new fields to the form. It allows users to create recurring forms or add new fields during runtime.                                                         |\n| removeFieldIds       | (ids: Array`\u003cstring\u003e`) =\u003e void              | Removes fields from the form at runtime. Deletes only fields that were added with the \"addFields\" function. Fields passed in by configuration cannot be removed. |\n| resetForm            | () =\u003e void                                  | Resets all fields and forms to their initial values and states.                                                                                                  |\n| submit               | () =\u003e void                                  | Submits the form, validating all the fields that are required.                                                                                                   |\n| validateAll          | () =\u003e boolean                               | Validates all fields. Returns if any field has error                                                                                                             |\n\n## Usage\n\n### Basic\n\nLet's create our first component\n```typescript jsx\n    import React from 'react'\n    import { ReactSmartScroller } from '@codegateinc/react-form-builder-v2'\n    \n    const getConfig = () =\u003e {\n        const name = useField({\n            key: 'name',\n            initialValue: '',\n            isRequired: true,\n            placeholder: 'name'\n        })\n        const surname = useField({\n            key: 'surname',\n            initialValue: '',\n            isRequired: true,\n            placeholder: 'surname'\n        })\n    \n        return {\n            name,\n            surname\n        }\n    }\n    \n    export const FormBuilder: React.FunctionComponent = () =\u003e {\n        const { form, submit } = useForm(getConfig(), {\n            onSuccess: validForm =\u003e console.log(validForm)\n        })\n\n        return (\n            \u003cContainer\u003e\n                \u003cInput {...form.name}/\u003e\n                \u003cInput {...form.surname}/\u003e\n                \u003cButton onClick={submit}\u003e\n                    save\n                \u003c/Button\u003e\n            \u003c/Container\u003e\n        )\n    }\n\n    const Container = styled.div`\n        display: flex;\n        flex-direction: column;\n        padding: 100px;\n        align-items: center;\n        input {\n            margin-bottom: 20px;\n        }\n    `\n    \n    const Button = styled.div`\n        background-color: green;\n        padding: 10px 15px;\n        color: white;\n        border-radius: 20px;\n        cursor: pointer;\n    `\n```\n\nHere is a sandbox with 3 simple types of different components to show how it works\nhttps://codesandbox.io/embed/fragrant-bush-4gpqkl?fontsize=14\u0026hidenavigation=1\u0026theme=dark\n\nBelow you can find some usage examples\n\n### setError\n\n```\n\u003cButton onClick={() =\u003e setError('input', 'custom error')}\u003e\n    set error\n\u003c/Button\u003e\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cdn.codegate.pl/react-form-builder-v2/setError.gif\" /\u003e\n\u003c/p\u003e\n\n### setInitialValue\n\n```\n\u003cButton onClick={() =\u003e setInitialValue('input', 'this is new initial value')}\u003e\n    set initial value\n\u003c/Button\u003e\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cdn.codegate.pl/react-form-builder-v2/setInitialValue.gif\" /\u003e\n\u003c/p\u003e\n\n### setFieldValue\n\n```\n\u003cButton onClick={() =\u003e setFieldvalue('input', 'this is new value')}\u003e\n    set field value\n\u003c/Button\u003e\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cdn.codegate.pl/react-form-builder-v2/setFieldValue.gif\" /\u003e\n\u003c/p\u003e\n\n### addFields\n\n```\n\u003cButton\n    onClick={() =\u003e addFields([{\n        key: 'second input',\n        placeholder: 'second input'\n    }])}\n\u003e\n    add field\n\u003c/Button\u003e\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cdn.codegate.pl/react-form-builder-v2/addFields.gif\" /\u003e\n\u003c/p\u003e\n\n### removeFields\n\n```\n\u003cButton\n    onClick={() =\u003e addFields([{\n        key: 'second input',\n        placeholder: 'second input'\n    }])}\n\u003e\n    add field\n\u003c/Button\u003e\n\u003cButton\n    onClick={() =\u003e removeFieldIds(['second input'])}\n\u003e\n    remove field\n\u003c/Button\u003e\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cdn.codegate.pl/react-form-builder-v2/removeFields.gif\" /\u003e\n\u003c/p\u003e\n\n## Contribution\n\nLibrary created by [Jacek Pudysz](https://github.com/jpudysz) and [Grzegorz Tarnopolski](https://github.com/gtarnopolski)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemaskinc%2Freact-form-builder-v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodemaskinc%2Freact-form-builder-v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemaskinc%2Freact-form-builder-v2/lists"}