{"id":13429566,"url":"https://github.com/GeDiez/react-use-formless","last_synced_at":"2025-03-16T03:31:52.394Z","repository":{"id":57347249,"uuid":"155792335","full_name":"GeDiez/react-use-formless","owner":"GeDiez","description":"useFormless allow you to control forms in React using react-hook approach","archived":false,"fork":false,"pushed_at":"2022-06-04T20:14:32.000Z","size":1610,"stargazers_count":50,"open_issues_count":2,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-24T14:38:12.117Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://gediez.github.io/react-use-formless/","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/GeDiez.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-11-02T00:26:13.000Z","updated_at":"2023-03-05T08:30:43.000Z","dependencies_parsed_at":"2022-09-15T07:10:26.840Z","dependency_job_id":null,"html_url":"https://github.com/GeDiez/react-use-formless","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeDiez%2Freact-use-formless","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeDiez%2Freact-use-formless/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeDiez%2Freact-use-formless/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeDiez%2Freact-use-formless/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GeDiez","download_url":"https://codeload.github.com/GeDiez/react-use-formless/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243822309,"owners_count":20353496,"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-07-31T02:00:41.845Z","updated_at":"2025-03-16T03:31:52.063Z","avatar_url":"https://github.com/GeDiez.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"/example/public/logo-useformless.png\" alt=\"logo\" /\u003e\n\u003c/h1\u003e\n\n# useFormless\n\n\u003e react-useformless is a simple library that allows you to control forms with react-hooks approach\n\n[![Awesome](https://awesome.re/badge.svg)](https://github.com/rehooks/awesome-react-hooks)\n[![Build Status](https://travis-ci.org/GeDiez/react-use-formless.svg?branch=master)](https://travis-ci.org/GeDiez/react-use-formless)\n[![styled with standard](https://img.shields.io/badge/styled_with-standard-ff69b4.svg)](https://github.com/standard/standard)\n\n\nWhy useFormless?\n\n- Works with nested forms 🎉\n- Zero dependencies 🆓\n- Includes helpers for field and form tags, it makes a easy for use\n\n# Getting Started\n\n## Step 1: Install it\n\n```bash\n$ yarn add react-useformless\n\n$ npm install react-useformless\n```\n\n## Step 2: Import it 📦\n\n```js\nimport useFormless from 'react-useformless';\n```\n\n## Step 3: Set state and options\n\nuseFormless accepts an optional object that lets you add validations handlers\n\n1. **Options(optional)**\n```js\n{\n initialValues: {\n   name: '',\n   email: '',\n },\n validate: (name, value) =\u003e {\n   // This function receives [name and value] as parameters and will return either a string with the error or an empty string.\n   // You can do your validations as follow\n\n   // 1.- Define an object with function validations for each name in the form,\n   // functions receive the value and return an error for the field\n   const validators = {\n     name: validateNameFunction,\n     email: validateEmailFunction\n     // ... else function validations for each field\n   }\n\n   // 2.- Get the function for the given `name` and then call it with the passed value\n   const errorFn = validators[name]\n   return errorFn(value)\n },\n onError: (ev: DOMEvent, { values, errors }) =\u003e {\n   ev.preventDefault()\n   // If you decide using onSubmit function provided by formless, this function will be fired after the submit error\n   // It receives DOMevent so you do whatever you want after it ends\n },\n onSuccess: (ev: DOMEvent, { values }) =\u003e {\n   ev.preventDefault()\n   //Same as error option, but this one is fired on success\n }\n}\n```\n## Step 4: Use it! 💡\n\nCreate an instance of useFormless and render it. Easy, isn't it? 💃🏻\n\n```jsx\n\nconst { values, errors, inputProps, onSubmit } = useFormless({ initialValues, validate, onSuccess, onError });\n\nreturn(\n \u003csection\u003e\n   \u003ch1\u003eBasic example\u003c/h1\u003e\n   \u003cform onSubmit={onSubmit}\u003e\n     \u003clabel htmlFor=\"name\"\u003eName\u003c/label\u003e\n     \u003cinput id=\"name\" type=\"text\" {...inputProps('name', 'armando')}/\u003e\n     \u003cp style={{color: 'red', fontSize: 9}}\u003e{errors.name}\u003c/p\u003e\n     \u003clabel htmlFor=\"email\"\u003eemail\u003c/label\u003e\n     \u003cinput id=\"email\" type=\"password\" {...inputProps('password')}/\u003e\n     \u003cp style={{color: 'red', fontSize: 9}}\u003e{errors.email}\u003c/p\u003e\n     \u003cinput type=\"submit\" value=\"Login\"/\u003e\n   \u003c/form\u003e\n \u003c/section\u003e\n)\n```\n\n\u003e if you prefer it, get started 🎮 with this snippet in [CodeSandbox](https://codesandbox.io/s/vyw7k42o87)\n\n# Prerequisites\n\nReact hooks are live now, so what are you waiting for?\nuseFormless is now updated with React v16.8 and ready to use\n\n# API\n\nuseFormless provides you a clean and easy-to-use API that you can attach to any component.\n\n\u003eNotice: Use react-hooks into functional components.\n\n#### Objects returned:\n\n| Name              | Description                                                           |\n| ----------------- | --------------------------------------------------------------------- |\n| values: `Object`  | contains all values using the key as name, see example above          |\n| errors: `Object`  | contains all errors using the key as name                             |\n| touched: `Object` | contains all values that have been touched/modified                        |\n\n#### Common behavior for forms:\n\n| Function                                  | Description                                                 |\n| ----------------------------------------- | ----------------------------------------------------------- |\n| setValue(name: string, value: any) | set a value and validate it                   |\n| getValue(name: string)             | get a value given a name                                    |\n| setValues({}: values)               | set all values (including party forms) but it doesn't trogger validations|\n| touchFieldname)                    | mark the passed value as touched                            |\n| reset()                             | set all values as initialValues Object                      |\n| party.create(name: string, { validate: function}))                             | you can create nested forms, this function receives a name and validates option that allows you to validate this party only, also it works like an object returned by useFormless and another party function to continue adding more nested forms                     |\n| validateForm()                   | Run validations, set errors and mark all objects as touched |\n| validateValue()                 | Run validations, set errors and mark all objects as touched |\n| validateParty(                  | Run validations only for a nested form, set errors and mark all objects as touched |\n| isValid: boolean                          | true: is for a valid form, false: is for an invalid form     |\n\n\n#### Helpers\n\nuseFormless splits the behavior and the UI, so your components become more reusables.\n\n| Function                         | Description |\n| -------------------------------- | ----------- |\n| inputProps(name: String): Object | This function will return custom props `{name, value, onChange, onBlur}`, pass this object to your input component directly, [see example](#Examples) |\n| inputCheckboxProps(name: String): Object | Same as inputProps but for checkbox inputs|\n| onSubmit(SyntacticEvent): void  | Handle submit event, this will trigger either onSuccess or onError functions|\n| field | an object with functions for fields |\n| party | an object with functions for party forms |\n| form | an object with functions for forms |\n\n\u003e See more about it in the documentation [official DOCS](https://gediez.github.io/react-use-formless/)\n\n\n### Examples\n\n```\u003cform id=\"my-form\" onSubmit={onSubmit}\u003e```\n\n```\u003cinput id=\"my-input\" type=\"text\" {...inputProps('email')}\u003e```\n\n# Contribute\n\n## Running the tests\n\nuseFormless uses `jest` and `react-testing-library`\n\n# Built With\n\n* [react16.8](https://reactjs.org/docs/hooks-intro.html) - The web framework used\n* [yarn](https://yarnpkg.com/en/) - For dependencies management\n\n# Authors\n\n* **Gibran Lopez** [gediez](https://github.com/GeDiez)\n* **Crystal Stream** [CrystalStream](https://github.com/CrystalStream)\n\n# Acknowledgments\n\n* Similar libraries; [formik](https://jaredpalmer.com/formik/) and [redux-form](https://redux-form.com/8.1.0/)\n\n# License\n\nuseFormless is [MIT licensed](https://github.com/facebook/react/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGeDiez%2Freact-use-formless","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGeDiez%2Freact-use-formless","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGeDiez%2Freact-use-formless/lists"}