{"id":21177515,"url":"https://github.com/sachskaylee/react-formilicious","last_synced_at":"2026-06-19T08:32:39.665Z","repository":{"id":129373577,"uuid":"143565948","full_name":"SachsKaylee/react-formilicious","owner":"SachsKaylee","description":"Easy to use, modular and simply delicious forms for React. 📝","archived":false,"fork":false,"pushed_at":"2019-04-22T15:05:12.000Z","size":3281,"stargazers_count":1,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-02T10:59:42.574Z","etag":null,"topics":["forms","forms-generator","react","react-formilicious","react-forms"],"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/SachsKaylee.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-04T22:04:47.000Z","updated_at":"2019-04-22T15:04:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"cf8dff16-53c9-44d2-8d1e-c92f8e9f089f","html_url":"https://github.com/SachsKaylee/react-formilicious","commit_stats":null,"previous_names":["patricksachs/react-formilicious"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/SachsKaylee/react-formilicious","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SachsKaylee%2Freact-formilicious","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SachsKaylee%2Freact-formilicious/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SachsKaylee%2Freact-formilicious/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SachsKaylee%2Freact-formilicious/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SachsKaylee","download_url":"https://codeload.github.com/SachsKaylee/react-formilicious/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SachsKaylee%2Freact-formilicious/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274268373,"owners_count":25253390,"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","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["forms","forms-generator","react","react-formilicious","react-forms"],"created_at":"2024-11-20T17:16:19.279Z","updated_at":"2026-06-19T08:32:39.635Z","avatar_url":"https://github.com/SachsKaylee.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @react-formilicious/core ![npm](https://img.shields.io/npm/v/@react-formilicious/core.svg)\n\nEasy to use, modular and simply delicious forms for React. 📝\n\n* Demo: https://patricksachs.github.io/react-formilicious/build\n* Changelog: https://github.com/PatrickSachs/react-formilicious/blob/master/CHANGELOG.md\n* Wiki: https://github.com/PatrickSachs/react-formilicious/wiki\n* Storybook: https://patricksachs.github.io/react-formilicious/core (https://patricksachs.github.io/react-formilicious/bulma for something visual)\n* Install: `npm install @react-formilicious/core`\n\n## Motivation\n\nForm management in React has always been a pain point for me. Not due to the lack of expressiveness, but due to the need of manually having to set up every field with its own event handlers, creating a property for it in the state, and possibly adding quite the amount of case-by-case code if you need adjusted validation per field.\n\nThis is fine for one or two fields in an application. If you need dozens of fields, this can quickly become an unmaintainable mess.\n\nreact-formilicious intends to fix this issue by providing a simple, yet powerful and extendible solution for both simple, aswell as complex and nested forms.\n\n## Feature spotlight\n\n* Simple - Supply a **plain JavaScript object** as the form, Formilicious takes care of the rest. No need to handle events, lifecycle, etc. yourself.\n* Extendible - Don't like a default field? Need a customized validator? The **entire library is modular**, you can **easily extend** Formilicious to your needs.\n* Asynchronous - A validator needs to contact your server in order to validate a field? Some data needs to be processed before a field can change its value? No problem, Formilicious is **asynchronous by default**!\n\n## Getting started\n\nThe core library does not include any fields since they are styling specific. In this quick guide we will be using the Bulma fields. Feel free to check if fields for your favourite framework are available under https://github.com/PatrickSachs/react-formilicious/tree/master/packages.\n\n```shell\n$ npm install @react-formilicious/core\n$ npm install @react-formilicious/bulma\n```\n\n```jsx\nimport Form from '@react-formilicious/core';\nimport combined from '@react-formilicious/core/validators/combined';\nimport range from '@react-formilicious/core/validators/range';\nimport required from '@react-formilicious/core/validators/required';\nimport TextField from '@react-formilicious/bulma/TextField';\nimport Checkbox from '@react-formilicious/bulma/Checkbox';\nimport checkForAvailableUsername from './my-own-validators/checkForAvailableUsername';\n\n\u003cForm\n  data={{\n    name: \"Patrick Sachs\"\n  }}\n  onSubmit={data =\u003e alert(JSON.stringify(data))}\n  elements={[\n    {\n      type: TextField,\n      key: \"name\",\n      name: \"🙃 Username\",\n      placeholder: \"🙃 Enter your name here!\",\n      validator: combined(\n        range({ min: 4, max: 16 }),\n        checkForAvailableUsername()\n      )\n    },\n    {\n      type: TextField,\n      key: \"password\",\n      name: \"🔑 Password\",\n      mode: \"password\",\n      placeholder: \"🔑 Your super secret password here!\",\n      validator: range({ min: 5 })\n    },\n    {\n      type: Checkbox,\n      key: \"tos\",\n      name: \u003cspan\u003e📄 Accept the \u003ca href=\"#/tos\"\u003eTOS\u003c/a\u003e?\u003c/span\u003e,\n      validator: required()\n    }\n  ]} /\u003e\n```\n\n![Demo Image](https://patrick-sachs.de/content/react-formilicious/demo.png?)\n\nSee the [react-formilicious wiki](https://github.com/PatrickSachs/react-formilicious/wiki) and/or the Storybook or the [core](https://patricksachs.github.io/react-formilicious/core) and [bulma](https://patricksachs.github.io/react-formilicious/bulma) library for more information, guides \u0026 tutorials!\n\n## License\n\nMIT - https://github.com/PatrickSachs/react-formilicious/blob/master/packages/core/LICENSE\n\n## Contributing\n\nAlways welcome! \nAfter cloning the repository make sure to run `bootstrap.cmd`(Windows only, feel free to open a PR with a SH file 😃) to get you up and running.\n`watch-all.cmd` builds and watches all packages.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsachskaylee%2Freact-formilicious","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsachskaylee%2Freact-formilicious","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsachskaylee%2Freact-formilicious/lists"}