{"id":16837181,"url":"https://github.com/ankeetmaini/simple-forms-react","last_synced_at":"2025-06-25T17:08:45.715Z","repository":{"id":57360157,"uuid":"116543926","full_name":"ankeetmaini/simple-forms-react","owner":"ankeetmaini","description":"An awesome Form for React!","archived":false,"fork":false,"pushed_at":"2018-03-14T12:45:12.000Z","size":16,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T03:22:31.884Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ankeetmaini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-07T06:43:47.000Z","updated_at":"2020-12-11T08:34:12.000Z","dependencies_parsed_at":"2022-09-06T22:23:06.492Z","dependency_job_id":null,"html_url":"https://github.com/ankeetmaini/simple-forms-react","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/ankeetmaini/simple-forms-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankeetmaini%2Fsimple-forms-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankeetmaini%2Fsimple-forms-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankeetmaini%2Fsimple-forms-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankeetmaini%2Fsimple-forms-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ankeetmaini","download_url":"https://codeload.github.com/ankeetmaini/simple-forms-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankeetmaini%2Fsimple-forms-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261917437,"owners_count":23229917,"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-10-13T12:16:27.707Z","updated_at":"2025-06-25T17:08:45.689Z","avatar_url":"https://github.com/ankeetmaini.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# simple-forms-react\n\n\u003e yet another Form component\n\n# install\n\n```\nnpm i -S simple-forms-react\n```\n\n# usage (simple, no validation)\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport 'regenerator-runtime/runtime';\n\nimport Form from 'simple-forms-react';\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003ch2\u003eSimple Forms React!\u003c/h2\u003e\n    \u003cForm\n      initialValues={{\n        itemName: 'Coconut',\n      }}\n      onSubmit={({ values }) =\u003e {\n        console.log(values);\n      }}\n    \u003e\n      {({ values, touched, fieldProps, handleSubmit }) =\u003e (\n        \u003cform onSubmit={handleSubmit}\u003e\n          \u003cdiv\u003e\n            \u003cinput\n              {...fieldProps({\n                id: 'itemName',\n                placeholder: 'Type to add item name',\n                value: values.itemName,\n              })}\n            /\u003e\n            {touched.itemName \u0026\u0026 values.itemName \u0026\u0026 \u003ch5\u003e{values.itemName}\u003c/h5\u003e}\n          \u003c/div\u003e\n          \u003cdiv\u003e\n            \u003cselect\n              {...fieldProps({\n                id: 'fruit',\n                value: values.fruit,\n              })}\n            \u003e\n              \u003coption value=\"\"\u003e---select---\u003c/option\u003e\n              \u003coption value=\"apple\"\u003eapple\u003c/option\u003e\n              \u003coption value=\"orange\"\u003eorange\u003c/option\u003e\n              \u003coption value=\"grapes\"\u003egrapes\u003c/option\u003e\n            \u003c/select\u003e\n            {touched.fruit \u0026\u0026 values.fruit \u0026\u0026 \u003ch5\u003e{values.fruit}\u003c/h5\u003e}\n          \u003c/div\u003e\n          \u003cinput type=\"submit\" value=\"Submit\" /\u003e\n        \u003c/form\u003e\n      )}\n    \u003c/Form\u003e\n  \u003c/div\u003e\n);\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n[![Edit form-example-basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/r570l9r33m)\n\n# usage (with validation, sync and async)\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport styled from 'styled-components';\nimport 'regenerator-runtime/runtime';\nimport Form from 'simple-forms-react';\nimport Spinner from './Spinner';\n\nconst Container = styled.div`\n  padding: 10px;\n`;\nconst ButtonDiv = styled.div`\n  margin: 30px 0;\n`;\nconst Error = styled.div`\n  color: red;\n`;\nconst InputHolder = styled.div`\n  margin: 12px 0;\n`;\n\nconst nameValidator = val =\u003e {\n  const regex = new RegExp(/^\\d+$/);\n  return !regex.test(val)\n    ? { valid: true }\n    : { valid: false, message: 'No numbers allowed' };\n};\nconst emptyValidator = val =\u003e\n  !val ? { valid: false, message: 'This is required' } : { valid: true };\n\nconst usernameValidator = val =\u003e\n  new Promise((resolve, reject) =\u003e {\n    setTimeout(() =\u003e resolve({ valid: true }), 5000);\n  });\n\nconst App = () =\u003e (\n  \u003cContainer\u003e\n    \u003ch1\u003esimple-forms-react\u003c/h1\u003e\n    \u003cForm\n      initialValues={{\n        name: '',\n        username: '',\n      }}\n      validators={{\n        name: [emptyValidator, nameValidator],\n        username: [emptyValidator, usernameValidator],\n      }}\n      onSubmit={({ values, setSubmitting }) =\u003e {\n        console.log('Submitted values: ', values);\n        setSubmitting(false);\n      }}\n    \u003e\n      {({\n        values,\n        touched,\n        errors,\n        valid,\n        fieldProps,\n        handleSubmit,\n        isSubmitting,\n      }) =\u003e (\n        \u003cform onSubmit={handleSubmit}\u003e\n          \u003cInputHolder\u003e\n            \u003clabel\u003eName: \u003c/label\u003e\n            \u003cinput\n              {...fieldProps({\n                id: 'name',\n                value: values.name,\n                placeholder: 'Enter your name',\n              })}\n            /\u003e\n            {touched.name \u0026\u0026 errors.name \u0026\u0026 \u003cError\u003e{errors.name}\u003c/Error\u003e}\n          \u003c/InputHolder\u003e\n          \u003cInputHolder\u003e\n            \u003clabel\u003eUsername\u003c/label\u003e\n            \u003cinput\n              {...fieldProps({\n                id: 'username',\n                value: values.username,\n                placeholder: 'type your username',\n              })}\n            /\u003e\n            {valid.username \u0026\u0026 \u003cSpinner radius=\"10\" stroke=\"2\" /\u003e}\n            {touched.username \u0026\u0026\n              errors.username \u0026\u0026 \u003cError\u003e{errors.username}\u003c/Error\u003e}\n          \u003c/InputHolder\u003e\n          \u003cButtonDiv\u003e\n            {isSubmitting ? (\n              \u003cSpinner /\u003e\n            ) : (\n              \u003cinput type=\"submit\" value=\"Submit\" /\u003e\n            )}\n          \u003c/ButtonDiv\u003e\n        \u003c/form\u003e\n      )}\n    \u003c/Form\u003e\n  \u003c/Container\u003e\n);\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n[![Edit Form Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9ljqypo87o)\n\n# third-party components integration\n\n* [react-select](https://github.com/JedWatson/react-select) integration [![Edit form-example-basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/1xvn0z81j)\n\n# api\n\n# `Form` props\n\n| name          | type     | default                                                                                                      | description                                                                                                       |\n| ------------- | -------- | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |\n| initialValues | Object   | {}                                                                                                           | you should pass all the fields as keys and their default/initial values                                           |\n| children      | function | `({values, touched, errors, valid, isSubmitting, fieldProps, handleSubmit, setValues, setSubmitting}) =\u003e {}` | this function should return the JSX which contains the form and all inputs                                        |\n| validators    | Object   | {}                                                                                                           | this contains validators for each input, please see Validator section to see the contract of a validator function |\n\n# `children` function arguments\n\n| name          | type     | description                                                                                                                                                                |\n| ------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| values        | Object   | contains values of all the inputs                                                                                                                                          |\n| touched       | Object   | key-value of inputs and whether they've been touched or not                                                                                                                |\n| errors        | Object   | errors object contains error message for inputs if there's an error                                                                                                        |\n| valid         | boolean  | tells if the entire form is valid or not                                                                                                                                   |\n| isSubmitting  | boolean  | tells if the form is submitting, useful to make your submit button disabled or hide altogether                                                                             |\n| fieldProps    | function | this returns the props that need to be applied on the input, you should pass all the props in as an object, it chains onChange and other things which Form uses internally |\n| handleSubmit  | function | use this as onSubmit prop of `\u003cform\u003e`                                                                                                                                      |\n| setValues     | function | accepts an object and updates the values of the inputs as per the passed argument                                                                                          |  |\n| setSubmitting | function | a helper utility to change the `isSubmitting` flag.                                                                                                                        |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankeetmaini%2Fsimple-forms-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fankeetmaini%2Fsimple-forms-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankeetmaini%2Fsimple-forms-react/lists"}