{"id":18051797,"url":"https://github.com/joegasewicz/react-bare-forms","last_synced_at":"2025-04-10T18:15:15.154Z","repository":{"id":40551340,"uuid":"257879281","full_name":"joegasewicz/react-bare-forms","owner":"joegasewicz","description":"A bare minimal React form library for quick \u0026 simple forms.","archived":false,"fork":false,"pushed_at":"2024-08-30T10:51:12.000Z","size":4571,"stargazers_count":23,"open_issues_count":25,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-10T13:34:13.479Z","etag":null,"topics":["form","javascript","react","react-form","react-forms","reactjs","typescript","validation"],"latest_commit_sha":null,"homepage":"https://joegasewicz.github.io/react-bare-forms/","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/joegasewicz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2020-04-22T11:20:58.000Z","updated_at":"2025-02-27T09:51:10.000Z","dependencies_parsed_at":"2024-05-20T10:43:29.956Z","dependency_job_id":"c845361f-883d-495d-a3d9-70f8ce4945db","html_url":"https://github.com/joegasewicz/react-bare-forms","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joegasewicz%2Freact-bare-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joegasewicz%2Freact-bare-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joegasewicz%2Freact-bare-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joegasewicz%2Freact-bare-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joegasewicz","download_url":"https://codeload.github.com/joegasewicz/react-bare-forms/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248269603,"owners_count":21075783,"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":["form","javascript","react","react-form","react-forms","reactjs","typescript","validation"],"created_at":"2024-10-30T22:56:03.163Z","updated_at":"2025-04-10T18:15:15.135Z","avatar_url":"https://github.com/joegasewicz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![npm](https://img.shields.io/npm/v/react-bare-forms)\n![NPM](https://img.shields.io/npm/l/react-bare-forms)\n[![Build Status](https://travis-ci.org/joegasewicz/react-bare-forms.svg?branch=master)](https://travis-ci.org/joegasewicz/react-bare-forms)\n![npm type definitions](https://img.shields.io/npm/types/react-bare-forms)\n[![codecov](https://codecov.io/gh/joegasewicz/react-bare-forms/branch/master/graph/badge.svg)](https://codecov.io/gh/joegasewicz/react-bare-forms)\n\n![ReactBareForms](./images/rbf_logo4.png)\n\nReact library using React Hooks to build forms \u0026 let you switch in \u0026 out Bootstrap 5 styling. **React Bare Forms** aka *RBF* aims\nto be the easiest to use form library for React.\n\n**React Bare Forms** library is compatible with both React functional \u0026 class components 🎉\n\n📚 Docs are [here](https://joegasewicz.github.io/react-bare-forms/) \n## Install\n```\nnpm install react-bare-forms\n\n// For react \u003c= 16.*\nnpm install react-bare-forms@0.1.19\n```\nReact Bare forms has 1 peer dependency. React Day Picker also contains CSS, so you may\nrequire loaders to build css if you're using Webpack or similar.\n```\nnpm i -S react-day-picker\n```\n\n## Usage - Functional Component with Hooks\nA basic form example with a text input field \u0026 submit button. Also, note how we import the `isFieldEmpty` function\nfrom `react-bare-forms`. This is a validator \u0026 can be used to validate a single or *group (such as radio buttons) field(s).\nThere are different validators available \u0026 also a custom validator factory function to create your own validators.\n```typescript jsx\nimport {Form, isFieldEmpty, SubmitButton, TextInputField} from \"react-bare-forms\";\n\nconst myState = { age: 0 }\nconst [state, setState] = React.useState(myState);\n\n\u003cForm\n    state={state}\n    context={setState}\n    bare={false}\n    callback={() =\u003e console.log(\"Form submitted!\")}\u003e\n\n    \u003cTextInputField\n        value={state.age}\n        name=\"age\"\n        hint=\"Enter your age\"\n        labeltext=\"Age\"\n        validators={[isFieldEmpty(2)]} /\u003e\n               \n    \u003cSubmitButton\u003eSubmit Form\u003c/SubmitButton\u003e\n\u003c/Form\u003e\n```\n\n## Usage - Class Component\nSimiliar to the functional component above but now we are using a Class component with \nlocal state example:\n```typescript jsx\nimport {Form, isFieldEmpty, SubmitButton, TextInputField} from \"react-bare-forms\";\nclass MyForm {\n    \n    state = {\n        \"age\": 0,\n    }\n    \n    myForm() {\n            return(\u003cForm\n            state={this.state}\n            context={this}\n            bare={false}\n            callback={() =\u003e console.log(\"Form submitted!\")}\u003e\n        \n            \u003cTextInputField\n                value={state.age}\n                name=\"age\"\n                hint=\"Enter your age\"\n                labeltext=\"Age\"\n                validators={[isFieldEmpty(2)]} /\u003e\n                       \n            \u003cSubmitButton\u003eSubmit Form\u003c/SubmitButton\u003e\n        \u003c/Form\u003e);\n    }\n\n\n}\n\n```\n\n## Usage - Class Component with Nested State\nSame as the Class component above but with nested state example:\n```typescript jsx\nimport {Form, isFieldEmpty, SubmitButton, TextInputField} from \"react-bare-forms\";\nclass MyForm {\n    \n    state = {\n        \"formData\": { // \u003c-- Note we are nesting out form state\n            \"age\": 0,\n        }\n    }\n    \n    myForm() {\n            return(\u003cForm\n            state={this.state}\n            context={this}\n            formKey=\"formData\" // \u003c-- Required: Name of our for formData attribute in the state object\n            bare={false}\n            callback={() =\u003e console.log(\"Form submitted!\")}\u003e\n        \n            \u003cTextInputField\n                value={state.age}\n                name=\"age\"\n                hint=\"Enter your age\"\n                labeltext=\"Age\"\n                validators={[isFieldEmpty(2)]} /\u003e\n                       \n            \u003cSubmitButton\u003eSubmit Form\u003c/SubmitButton\u003e\n        \u003c/Form\u003e);\n    }\n\n\n}\n\n```\n\n## File Ref\nRBF's provides a function that returns a React ref to access your file object. To use, simply assign the returned ref from\nthe `createFileRef` function to a variable \u0026 pass this variable to `FileField`'s ref prop.\nTo access your file object, pass your React ref to the `getFileFromRef` function.\n*Make sure you assign a `name` prop if you use the validators (`isFile()` for example).*\nFor example:\n````typescript jsx\n import {createFileRef, FileField, isFile, getFileFromRef} from \"react-bare-forms\";\n\n const myFileRef = createFileRef();\n \n \u003cFileField\n     ref={myFileRef}\n     name=\"myFile\" // You must assign a name to use the validators\n     hint=\"Must be a file\"\n     labeltext=\"Upload your file\"\n     styleSize=\"large\" // Optional (default is \"small\"). Either \"small\" or \"large\" styling.\n     validators={[isFile()]}\n /\u003e\n \n // To access the File object use `getFileFromRef` helper function:\nlet myFile = getFileFromRef(myFileRef);\n\n// Example callback:\nconst myCallback = () =\u003e {\n    const myFile = getFileFromRef(myFileRef);\n    const formData = new FormData();\n    formData.append(\"tmyFile\", myFile);\n}\n\n// then add to the RBF's Form component:\n\u003cForm\n    callback={myCallback}\n    // ... .etc\n````\n\n\n## Form Consumer\nRBF's provides the `FormConsumer`, which gives access to field information.\nBelow is an example of a form containing a single text input field.\n````typescript jsx\nimport {Form, FormConsumer, IFormContext, isFieldEmpty, TextInputField} from \"react-bare-forms\";\n\n// Example within a class component\nstate = { age: 0 }\n\n\u003cForm state={myState} context={this}\u003e\n    \u003cTextInputField\n        value={this.state.age}\n        name=\"age\"\n        hint=\"Enter your age\"\n        labeltext=\"Age\"\n        validators={[isFieldEmpty(5)]}\n    /\u003e\n    \u003cFormConsumer\u003e\n        {(context: IFormContext) =\u003e {\n            return \u003ccode\u003e{JSON.stringify(context.metadata)}\u003c/code\u003e;\n        }}\n    \u003c/FormConsumer\u003e\n\u003c/Form\u003e\n\n````\nThe `context` object is available using the `FormConsumer` component. You can access the entire form context \nfrom the callback's [**IFormContext**](https://joegasewicz.github.io/react-bare-forms/interfaces/_form_.iformcontext.html) type argument. The context includes a `metadata` property which gives you detailed\nvalues of the current state of all the form fields \u0026 validation state.\n````json\n{\"inputs\":{\"state\":{\"age\":{\"name\":\"age\",\"validation\":[{\"isValid\":false,\"messages\":[\"Must be at least 2 characters\"]}],\"isTouched\":false,\"fieldValues\":{\"type\":\"value\",\"currentValue\":0}}},\"metaType\":\"inputs\",\"defaultState\":{},\"_name\":\"age\",\"_fieldType\":\"text\"},\"checkboxes\":{\"state\":{},\"metaType\":\"checkboxes\",\"defaultState\":{}},\"files\":{\"state\":{},\"metaType\":\"files\",\"defaultState\":{}},\"radioGroups\":{\"state\":{},\"metaType\":\"radioGroups\",\"defaultState\":{}}}\n````\n\n## Validators\n\nThere are validators available to handle all the basic common form validation requirements. Below is a list\nof the current validators available but this list should grow in the near future!\n\n- [areFieldsEqual](https://joegasewicz.github.io/react-bare-forms/modules/_validators_.html#arefieldsequal)\n- [isChecked](https://joegasewicz.github.io/react-bare-forms/modules/_validators_.html#ischecked)\n- [isEmailValid](https://joegasewicz.github.io/react-bare-forms/modules/_validators_.html#isemailvalid)\n- [isFieldEmpty](https://joegasewicz.github.io/react-bare-forms/modules/_validators_.html#isfieldempty)\n- [isFile](https://joegasewicz.github.io/react-bare-forms/modules/_validators_.html#isfile)\n- [isRadioChecked](https://joegasewicz.github.io/react-bare-forms/modules/_validators_.html#isradiochecked)\n- [isValidDate](https://joegasewicz.github.io/react-bare-forms/modules/_validators_.html#isvaliddate)\n\nTo create your own custom validator use:\n\n- [customValidator](https://joegasewicz.github.io/react-bare-forms/modules/_validators_.html#customvalidator)\n\n## Form Fields\n\n#### Form component\nThe main Form component that is required to wrap all RBF components. If the component that uses the Form component is a functional component then only the state props \u0026 state update function returned from the useState hook are required. If you are calling Form component from a class component then you must pass your local context or this keyword to the context prop.\n\nAn example using *RBF* Form component in a functional component\n\n```typescript jsx\n// Minimal setup for a RBF's Form component\n\nconst myState = {\n  username: '',\n}\n\n const [state, setState] = React.useState(state);\n \u003cForm state={myState} context={setState}\u003e\u003c/Form\u003e\u003e\n```\n\nTo use *RBF* Form component from a class component, you must pass in your\nlocal context or `this` keyword.\n\n```typescript jsx\n// Minimal setup for a RBF's Form component for a class component\n\nconst this.state = { // in the constructor\n  username: '',\n}\n\n\u003cForm state={this.state} context={this}\u003e\u003c/Form\u003e\n\n```\n\n## Input Field components\nComponents that cover the `input` field element:\n\n- [TextInputField](https://github.com/joegasewicz/react-bare-forms#textinputfield)\n- [EmailField](https://github.com/joegasewicz/react-bare-forms#emailfield)\n- [PasswordField](https://github.com/joegasewicz/react-bare-forms#passwordfield)\n- [CheckBoxField](https://github.com/joegasewicz/react-bare-forms#checkboxfield) \n- [DatePickerField](https://github.com/joegasewicz/react-bare-forms#datepickerfield)\n- [QueryInputField](https://github.com/joegasewicz/react-bare-forms#queryinputfield)\n#### TextInputField\n```typescript jsx\nimport {TextInputField} from \"react-bare-forms\";\n\nconst state = { username: \"\" }\n// A bare form example ... remember to set the Form.bare property to `true`\n\u003cTextInputField\n    value={this.state.username}\n    name=\"username\"\n/\u003e\n\n// Example with Bootstrap styling (Bootstrap styling comes as default)\n\n\u003cTextInputField\n    value={state.username}\n    name=\"username\"\n    hint=\"Needs to be at least 50 characters long\"\n    labeltext=\"Username\"\n/\u003e\n```\n#### EmailField\n```typescript jsx\n  import {EmailField} from \"react-base-forms\"\n\n  const state = { email: \"\" }\n\n // A bare form example ... remember to set the Form.bare property to `true`\n \u003cEmailField\n    value={state.email}\n    name=\"email\"\n /\u003e\n\n // Example with Bootstrap styling (Bootstrap styling comes as default)\n \u003cEmailField\n    value={state.email}\n    name=\"email\"\n    hint=\"Needs to be at least 50 characters long\"\n    labeltext=\"Username\"\n  /\u003e\n```\nThere is a bug when working with React \u0026 input fields. See [Cursor jumps to end of controlled input](https://github.com/facebook/react/issues/955) \nWe have provided a fix for `text` and `password` fields but not `email` fields. If you wish to avoid the\ncursor jumping *bug*, then use a `TextInputField` with the `isEmailValid()` validator. For example:\n\n```typescript jsx\n\u003cTextInputField\n    value={state.email}\n    name=\"Must be a valid email\"\n    labeltext=\"Email\"\n    validators={[isEmailValid()]}\n/\u003e\n```\n#### PasswordField\nThe `PasswordField` works the same as the `EmailField` \u0026 `TextInputField`'s.\n```typescript jsx\n\nimport {areFieldsEqual, isFieldEmpty, PasswordField} from \"react-base-forms\";\n \nconst state = { password: \"\", confirmPassword: \"\" };\n \n// A bare form example ... remember to set the {@link Form.bare} property to `true`\n\u003cPasswordField\n  value={state.password}\n  name=\"username\"\n  validators={[isFieldEmpty(8)]}\n/\u003e\n \n// Example with Bootstrap styling (Bootstrap styling comes as default)\n\n\u003cPasswordField\n  value={state.confirmPassword}\n  name=\"password\"\n  hint=\"Needs to be at least 8 characters long\"\n  labeltext=\"Password\"\n/\u003e\n```\nAlso we can create two *PasswordField* components to confirm passwords are equal. Please see\n{@link areFieldsEqual} for more info.\nThe first *PasswordField* has has a *name* prop of **password** \u0026 the second *PasswordField* a name\nprop of *confirmPassword*. Then we can add a *areFieldsEqual* validator to the *PasswordField*\nwith the *confirmPassword* name props *areFieldsEqual* takes the first *PasswordField*\nname as an argument).\n\n```typescript jsx\n\u003cPasswordField\n    name=\"password\"\n    // other props...\n\n/\u003e\n\n\u003cPasswordField\n    name=\"confirmPassword\"\n    // other props...\n    validators={[areFieldsEqual(\"password\")]}\n/\u003e\n```\n#### DatePickerField\nA Date picker with optional validation\nThe Datepicker field is already styled \u0026 includes optional validation for to \u0026 from dates.\nTo use the `isValidDate` pass in an array containing either a from or to date string OR both OR none.\n ```typescript jsx\n    \u003cDatePickerField\n        value={state.date}\n        name=\"date\"\n        // Pass in the css class names to style the calender\n        datePickerClassNames=\"yourClassName...\"\n        // Optional validators\n        validators={[isValidDate([\"2021-01-10\", \"2021-03-10\"])]}\n    /\u003e\n ```\n\n#### QueryInputField\nThis field provides a list of options to select from using the onChange event.\n`queryresults` is the an array of objects (usually returned from a remote api)\n`objectkey` is the key of the value you require to display when the user begins to type\n\n```typescript\nlet fruitState = [{name: \"peach\"},{name: \"plum\"}]\n\u003cQueryInputField\n    value={state.fruit}\n    name=\"fruit\"\n    hint=\"Enter your Fruit\"\n    labeltext=\"fruit\"\n    validators={[isFieldEmpty(2)]}\n    queryresults={fruitState}\n    objectkey=\"name\"\n/\u003e\n```\n\n#### CheckBoxField\nThe **CheckBoxField** component takes a `checked` prop instead of the usual `value` prop. \n```typescript jsx\n  import {CheckBoxField} from \"react-base-forms\";\n\n  const state = { password: \"\", confirmPassword: \"\" };\n\n \u003cCheckBoxField\n   name=\"terms\"\n   checked={this.state.terms}\n /\u003e\n\n // Example with Bootstrap styling (Bootstrap styling comes as default)\n \u003cCheckBoxField\n   name=\"terms\"\n   checked={state.terms}\n   hint=\"Click to agree\"\n   labeltext=\"Agree to terms \u0026 conditions\"\n /\u003e\n```\n\n### Other Field Elements\nThe rest of the single input *fields.\n\n#### TextArea Input _field\n```typescript jsx\n\u003cTextAreaField\n    name=\"about\"\n    value={this.state.about}\n    hint=\"Your email\"\n    labeltext=\"Must be at least 20 characters\"\n    validators={[isFieldEmpty(20)]}\n/\u003e\n\n```\n\n#### SelectField\nA component to render a select field element.\n\n```typescript jsx\n  import {SelectField} from \"react-base-forms\";\n\n  const state = { fruitChoice: \"\" };\n\n \u003cSelectField\n   size=\"lg\"\n   value={state.fruitChoice}\n   name=\"fruitChoice\"\n   options={[\"banana\", \"apple\", \"orange\"]}\n  /\u003e\n```\n\nYou can also pass an array of objects but you must use both the\n*objectkey* \u0026 *objectValue* props. the `objectkey` will update your state\nvalue \u0026 the `objectValue` is what is displayed to the user as an option.\n\n```typescript jsx\n// This is your option data\nlet selectData = [\n  {id: 1, name: \"first\"},\n  {id: 2, name: \"second\"},\n];\n// The state which will receive the update\nlet state = {\n   select_data_id: undefined as any,\n};\n\n\u003cSelectField\n  size=\"lg\"\n  value={state.select_data_id}\n  name=\"select_data_id\"\n  objectkey=\"id\" // Value will update state.select_data_id e.g *1, 2...* \n  objectvalue=\"name\" // Value will be displayed in the select field e.g *first, second...*  \n  options={selectData}\n/\u003e\n```\n \n### Radio Buttons\n\n#### RadioGroup\nThe `RadioGroup` component takes a single props of `name`, which\n * must be a unique to a form. See {@link RadioField}.\n```typescript jsx\n   import {CheckBoxField} from \"react-base-forms\";\n \n   \u003cRadioGroup name=\"group1\"\u003e\n     // place RadioFields components here...\n   \u003c/RadioGroup\u003e\n ```\n\n#### RadioField\n`RadioField` inputs are designed to be used with the **RadioGroup** component.\n To use this component, add or nest it within a **RadioGroup** component as children.\n It's possible to also use the **isRadioChecked** validator with a RadioGroup, as shown below:\n```typescript jsx\n import {isRadioChecked, RadioField, RadioGroup} from \"react-base-forms\";\n \n const state = { male: true, female: false };\n \n \u003cRadioGroup name=\"group1\"\u003e\n   \u003cRadioField\n     name=\"male\"\n     checked={state.male}\n     hint=\"Click to agree\"\n     labeltext=\"Agree to terms \u0026 conditions\"\n   /\u003e\n \n   \u003cRadioField\n     name=\"female\"\n     checked={state.female}\n     hint=\"Click to agree\"\n     labeltext=\"Agree to terms \u0026 conditions\"\n     validators={[isRadioChecked()]}\n   /\u003e\n   \n \u003c/RadioGroup\u003e\n```\nWarning: Currently `RadioField` compoments must be nested directly within a `RadioGroup`.\nThere is an issue currently open that will enable nested jsx elements between a `RadioField` it's `RadioGroup`.\nSee [issue #102](https://github.com/joegasewicz/react-bare-forms/issues/102)\n\n## Buttons\nThe SubmitButton only requires a text string as children props (see below example).\nThe SubmitButton will be disabled until all form fields with a *validators* prop are validated.\n ```typescript jsx\n\n import {SubmitButton} from \"react-base-forms\";\n\n \u003cSubmitButton\u003eSubmit\u003c/SubmitButton\u003e\n```\n\n## Bootstrap 4 / 5\nBootstrap 4 / 5 doesn't come with React Bare Forms so that you can obtain the smallest bundle size possible!\n\nThere are several ways to include Bootstrap 4. the simplist (but not the best) is to import it directly from the cdn in your index.html file. For example\n```html\n      \u003clink rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css\" integrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\" crossorigin=\"anonymous\"\u003e\n``` \n\nBut a much better way is to use Sass, so then we can choose which Bootstrap 4 Sass components we want our React app to use.\n\n```\n    npm install bootstrap\n```\n\nThen install the loaders\n```\nnpm install sass style-loader css-loader sass-loader --save-dev\n\n# In your webpack.config.js:\n\n    {\n             test: /\\.scss$/,\n             use: [\n                 \"style-loader\", // creates style nodes from JS strings\n                 \"css-loader\", // translates CSS into CommonJS\n                 \"sass-loader\" // compiles Sass to CSS, using Node Sass by default\n             ]\n    }\n```\nIf you want to keep bundle sizes to a minimum, React Bare Forms only requires the following bootstrap 4 components:\n- Forms\n- Buttons\n- Alerts\n\nYou can import them like this:\n```scss\n// - mystyles.scss\n// If you want all the styles\n@import \"~bootstrap\";\n// Even better, just import the bootstrap components you need\n// Required\n@import \"~bootstrap/scss/functions\";\n@import \"~bootstrap/scss/variables\";\n@import \"~bootstrap/scss/mixins\";\n\n// Optional\n@import \"~bootstrap/scss/forms\";\n@import \"~bootstrap/scss/alert\";\n@import \"~bootstrap/scss/buttons\";\n```\nAnd finally import your sass into your React application:\n\n```jsx\nimport \"./mystyles.scss\";\n```\n\n\u003csup\u003e**Fields that are not part of a RBF's form group*\u003c/sup\u003e\n\n## Contributors\n[![GitHub issues](https://img.shields.io/github/issues/joegasewicz/react-bare-forms)](https://github.com/joegasewicz/react-bare-forms/issues)\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\n\n## Lincence \nLicence MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoegasewicz%2Freact-bare-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoegasewicz%2Freact-bare-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoegasewicz%2Freact-bare-forms/lists"}