{"id":19451156,"url":"https://github.com/sreejit7/react-config-form","last_synced_at":"2026-05-02T22:32:21.954Z","repository":{"id":51717380,"uuid":"519118242","full_name":"Sreejit7/react-config-form","owner":"Sreejit7","description":"A lightweight npm package to build highly customizable \u0026 accessible forms in React with a config object. Packed with full type safety.","archived":false,"fork":false,"pushed_at":"2022-12-02T16:15:16.000Z","size":24679,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-08T03:06:32.410Z","etag":null,"topics":["config","form","forms","npm","npm-package","react","react-config-form","react-forms","react-typescript","tsdx","typescript"],"latest_commit_sha":null,"homepage":"https://formbuildr.vercel.app","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/Sreejit7.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}},"created_at":"2022-07-29T07:15:54.000Z","updated_at":"2022-07-31T15:07:44.000Z","dependencies_parsed_at":"2023-01-22T22:45:14.648Z","dependency_job_id":null,"html_url":"https://github.com/Sreejit7/react-config-form","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sreejit7%2Freact-config-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sreejit7%2Freact-config-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sreejit7%2Freact-config-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sreejit7%2Freact-config-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sreejit7","download_url":"https://codeload.github.com/Sreejit7/react-config-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240638773,"owners_count":19833351,"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":["config","form","forms","npm","npm-package","react","react-config-form","react-forms","react-typescript","tsdx","typescript"],"created_at":"2024-11-10T16:40:28.257Z","updated_at":"2026-05-02T22:32:21.915Z","avatar_url":"https://github.com/Sreejit7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-config-form\n\n\u003cimg width=\"944\" alt=\"image\" src=\"https://user-images.githubusercontent.com/52678249/177845405-f4292487-db1a-4223-b8a1-fafb1826a6a1.png\"\u003e\n\nA lightweight form builder package for creating highly customizable and accessible forms in React just with a config. The component removes all necessity to write long boilterplate for handling state, change \u0026 errors for any React form. Just pass in a **config**, and attach a **form submit handler**, and you're done! Comes with the power of [TypeScript](https://www.typescriptlang.org/).\n\n[**Visit the site**](https://react-config-form.vercel.app)\n\n## Features\n\n- Render a form with just a config of all the fields needed in the form, with their `label` and `initialValue`.\n- Ability to add custom header and footer elements _(including the Submit button, don't forget it!)_ for the form.\n- Ability to handle form submission, by passing an `onSubmit` callback prop. The callback receives the form state _(an object of form labels as keys and the input value as values)_ as an argument.\n- High customizability:\n  - Custom **form, form container, inputs, labels, form groups**(a group contains the label \u0026 input for a form element) \u0026 **form sections**.\n  - Custom input sizes [small | medium (default) | large]\n  - Customize by passing `className` or/and `styles` as props\n  - **Customize all forms on your app globally** using global classnames, or\n  - **Customize each form differently** using props for individual forms.\n- Error handling on form level \u0026 input level for inputs which are `required` to be filled.\n- Fully keyboard accessible \u0026 responsive.\n- A built in `SubmitButton` component for providing a custom form submit button easily.\n\n## Getting Started\n\nInstall the package using:\n\n```bash\n# with npm\nnpm install --save react-config-form\n# with yarn\nyarn add react-config-form\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport {\n  FormBuilder,\n  SubmitButton\n  FormInputConfig,\n  FormSubmitState,\n} from \"react-config-form\";\n// This stylesheet contains the default styling for the form\nimport 'react-config-form/dist/react-config-form.cjs.development.css';\n\nconst LoginForm = () =\u003e {\n  const loginFormConfig: FormInputConfig[] = [\n    {\n      label: \"Username\",\n      initialValue: \"\",\n      type: \"text\",\n      required: true,\n    },\n    {\n      label: \"Password\",\n      initialValue: \"\",\n      type: \"password\",\n      required: true,\n    }\n  ];\n\n  const handleLoginFormSubmit = (form: FormSubmitState) =\u003e {\n    console.log(form);\n  };\n\n  return (\n      \u003cFormBuilder\n        config={loginFormConfig}\n        formStyles={{\n          backgroundColor: \"#4cd8d3\",\n          border: \"1px solid #1e014a\",\n        }}\n        formHeader={\n          \u003cheader\u003e\n            \u003ch1\u003eLogin\u003c/h1\u003e\n          \u003c/header\u003e\n        }\n        onSubmit={handleLoginFormSubmit}\n      \u003e\n        \u003cSubmitButton text=\"Login\" /\u003e\n      \u003c/FormBuilder\u003e\n  );\n};\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render(\u003cLoginForm/\u003e);\n```\n\n### Styling the form\n\nYou can customize the styles for a form in multiple ways:\n\n#### 1. Default styles\n\nYou can choose to use the minimal default styles that come with this package, hence writing less css for your forms. _(One goal of this package is to make you write less code for your forms!)_. Just include this line in your form component:\n\n```jsx\nimport 'react-config-form/dist/react-config-form.cjs.development.css';\n```\n\n#### 2. Use your own styles together with default styles\n\nMost times, you'll probably want to use custom styles for your form, but **not start from scratch** _([like these examples](https://formbuildr.vercel.app/examples))_. You can use both, the default styles and your custom styles, overriding some default styles through the [config](#config), [props](#form-props) or [global classnames](#global-classnames). _Global classnames are especially useful for re-using same styles for multiple or all forms across your app._\n\n```jsx\n// Import stylesheets in this order\nimport 'react-config-form/dist/react-config-form.cjs.development.css';\nimport 'path-to-your-custom-css-1';\nimport 'path-to-your-custom-css-2';\n// ... and so on.\n```\n\n**The ordering of the imports are important since you want to override the default styles with the custom ones.**\n\n#### 3. Custom styles\n\nIf you just want to use your custom styles, you can create your own styles for a form through the [global classnames](#global-classnames) or by passing in custom classnames through the [config](#config) or [props](#form-props). **No need to import the default css.**\n\n## Playground\n\nThere is a [Parcel-based](https://parceljs.org) playground for an example form inside `/example`. You can run the playground locally using these commands:\n\n```bash\ncd example\nnpm i # or yarn to install dependencies\nnpm start # or yarn start\n```\n\nThe default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, due to [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).\n\n**For seeing the more example forms demo, please check the [website](https://formbuildr.vercel.app/examples).**\n\n## Deploying the Example Playground\n\nThe Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):\n\n```bash\ncd example # if not already in the example folder\nnpm run build # builds to dist\nnetlify deploy # deploy the dist folder\n```\n\nAlternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:\n\n```bash\nnetlify init\n# build command: yarn build \u0026\u0026 cd example \u0026\u0026 yarn \u0026\u0026 yarn build\n# directory to deploy: example/dist\n# pick yes for netlify.toml\n```\n\n## Props\n\n### \u003ca name=\"form-props\"\u003e\u003c/a\u003eFormBuilder props\n\n_Required props are marked with an asterisk(\\*)_\n\n|      Prop       |     Type      | Description                                                                                                  |\n| :-------------: | :-----------: | ------------------------------------------------------------------------------------------------------------ |\n|    config\\*     |    `Array`    | An array of config objects for all form input fields.                                                        |\n|   onSubmit\\*    |  `Function`   | A callback function that takes the form state as an \u003cbr\u003eargument and gets called when the form is submitted. |\n|   formHeader    | `JSX Element` | A JSX Element that gets rendered above the actual form.                                                      |\n|    formClass    |   `string`    | A string that includes class(es) to be attached with\u003cbr\u003ethe form.                                            |\n|   formStyles    |   `Object`    | A style object that includes styles for the form.                                                            |\n| containerClass  |   `string`    | A string that includes class(es) to be attached with\u003cbr\u003ethe form container.                                  |\n| containerStyles |   `Object`    | A style object that includes styles for the \u003cbr\u003eform container.                                              |\n|    children     |  `ReactNode`  | React Elements (like a Submit button) that gets rendered \u003cbr\u003ebeneath the form body (all the form fields).    |\n\n### SubmitButton props\n\n|    Prop     |            Type(s)            | Description                                                                       |\n| :---------: | :---------------------------: | --------------------------------------------------------------------------------- |\n|    text     |           `string`            | The button text \u003cbr\u003e[By default, it'll show a 'Submit' text]                      |\n|  position   | `left`\u003cbr\u003e`middle`\u003cbr\u003e`right` | The alignment for the submit button.\u003cbr\u003e[By default, it'll show up in the middle] |\n| submitClass |           `string`            | A string that includes class(es) \u003cbr\u003eto be attached with the submit button.       |\n\n## Types\n\n### \u003ca name=\"config\"\u003e\u003c/a\u003e Config type\n\nEach form input config object contains the following:\n\n_Required properties are marked with an asterisk(\\*)_\n\n|   Property   |                    Type(s)                    | Description                                                                                                                                                                                                            |\n| :----------: | :-------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n|   label\\*    |                   `string`                    | The label for the input. The label is used as a key for \u003cbr\u003estoring values in the form state on submission.                                                                                                            |\n|    type\\*    | all input types\u003cbr\u003e `textarea`\u003cbr\u003e `dropdown` | The type for the input. (Like - \"text\", \"email\" etc).\u003cbr\u003eThere are two custom types as of now - \"textarea\" \u0026 \"dropdown\".\u003cbr\u003e[**All input types are not tested, some input types may show \u003cbr\u003eunexpected behaviours.**] |\n| initialValue |                As per the type                | The initialValue for the input. [Not required for types like \u003cbr\u003e\"file\" \u0026 \"dropdown\".]                                                                                                                                 |\n|   required   |                   `boolean`                   | Boolean denoting whether a value is required for the input.                                                                                                                                                            |\n|   options    |                    `Array`                    | A list of options for the input. Required for selective inputs\u003cbr\u003elike \"dropdown\" or \"radio\".                                                                                                                          |\n|   checked    |                   `boolean`                   | Boolean denoting the condition when a field should be \u003cbr\u003echecked/filled. [Useful for \"checkbox\"/\"radio\" type inputs.]                                                                                                 |\n|     size     |       `small` \u003cbr\u003e`medium` \u003cbr\u003e`large`        | Specifies the size of the input. [Default value - \"medium\"].                                                                                                                                                           |\n| placeholder  |                   `string`                    | A placeholder for the input.                                                                                                                                                                                           |\n|   onChange   |                  `Function`                   | A callback for that gets called with the current input value\u003cbr\u003ewhenever the input is changed. [Avoid using it for managing state \u003cbr\u003efor the form to avoid multiple sources of truth.]                                |\n|  className   |                   `string`                    | A string that includes class(es) to be attached with the input.                                                                                                                                                        |\n|    styles    |                   `Object`                    | A style object that includes styles for the input.                                                                                                                                                                     |\n|  labelClass  |                   `string`                    | A string that includes class(es) to be attached with the label.                                                                                                                                                        |\n|  groupClass  |                   `string`                    | A string that includes class(es) to be attached with the form group \u003cbr/\u003e(label and input box).                                                                                                                        |\n| groupHeader  |                 `JSX Element`                 | A header element for a particular form group. \u003cbr/\u003e[**This effectively makes dividing a form into multiple sections possible**].                                                                                       |\n| groupFooter  |                 `JSX Element`                 | A footer element for a particular form group.                                                                                                                                                                          |\n\n## \u003ca name=\"global-classnames\"\u003e\u003c/a\u003eGlobal classNames\n\nGlobal classNames can be used inside your project to **style all forms globally across your app**. If you have a lot of forms, and want to apply common styles to each form, this will be much faster as opposed to having to add props for each form individually.\nHere goes the list of global classnames:\n\n|     Classname     |                                                                Element                                                                |\n| :---------------: | :-----------------------------------------------------------------------------------------------------------------------------------: |\n|       form        |                                                         The main form element                                                         |\n|  form-container   |                                                          The form container                                                           |\n|    form-group     |                       Each form group (A form group consists of \u003cbr\u003ethe label \u0026 the input for each form field)                        |\n| form-group-{type} | A dynamic classname for form group of a \u003cbr\u003eparticular input type. [For example, \u003cbr\u003ethis will be `form-group-text` for a text input] |\n|    form-label     |                                                 Each label for all inputs in the form                                                 |\n|   form-required   |                                           The \\* element marking an input field as required                                           |\n| form-group-error  |                            The error text shown for required fields in the \u003cbr\u003eform that are still empty.                             |\n\n## Some known issues\n\nThere are some known issues you might encounter while using the `FormBuilder` component.\n\n- Inputs of type \"file\" don't reset after submitting the form.\n- The dropdown input takes full available width of the form. (Feel free to override this behaviour using global classnames `form-input-dropdown` \u0026 `form-group-dropdown`).\n\n## P.S: This project is bootstrapped with [TSDX](https://tsdx.io/)\n\nTSDX is a Zero-config CLI tool for TypeScript package development. Please check out more about TSDX on the site.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsreejit7%2Freact-config-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsreejit7%2Freact-config-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsreejit7%2Freact-config-form/lists"}