{"id":17349205,"url":"https://github.com/co2-git/reactors-form","last_synced_at":"2025-03-27T11:44:23.499Z","repository":{"id":68259600,"uuid":"61059473","full_name":"co2-git/reactors-form","owner":"co2-git","description":"Form components for the Reactors framework.","archived":false,"fork":false,"pushed_at":"2018-01-20T00:42:31.000Z","size":205,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T16:23:14.928Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/co2-git.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-06-13T18:20:12.000Z","updated_at":"2016-12-04T19:29:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"bb6d1b64-7764-4b31-9821-1121e1d2498d","html_url":"https://github.com/co2-git/reactors-form","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/co2-git%2Freactors-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/co2-git%2Freactors-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/co2-git%2Freactors-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/co2-git%2Freactors-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/co2-git","download_url":"https://codeload.github.com/co2-git/reactors-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245841689,"owners_count":20681184,"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-15T16:55:02.429Z","updated_at":"2025-03-27T11:44:23.477Z","avatar_url":"https://github.com/co2-git.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"reactors-form\n===\n\nForm components for the [Reactors](https://github.com/co2-git/reactors) framework.\n\nReactors is a framework based on React to build hybrid apps that run web, mobile and desktop.\n\n# Install\n\n```bash\nyarn add react reactors reactors-form\n```\n\n# Usage\n\n```javascript\nimport React, {PureComponent} from 'react';\nimport {Text, View} from 'reactors';\nimport {Button, Input, Picker} from 'reactors-form';\n\nconst teams = [\n  {id: 1, name: 'Red'},\n  {id: 2, name: 'Blue'},\n  {id: 3, name: 'Green'},\n];\n\nclass LoginForm extends PureComponent {\n  state = {\n    email: null,\n    error: null,\n    team: null,\n  };\n  render = () =\u003e (\n    \u003cView\u003e\n      {this.state.error \u0026\u0026 \u003cText\u003e{this.state.error}\u003c/Text\u003e}\n      \u003cInput\n        email\n        name=\"email\"\n        value={this.state.email}\n        onChangeText={email =\u003e this.setState({email})}\n      /\u003e\n      \u003cPicker\n        data={teams}\n        id=\"id\"\n        renderRow={team =\u003e (\n          \u003cText\u003e{team.name}\u003c/Text\u003e\n        )}\n        onSelect={teamId =\u003e this.setState({team: teamId})}\n      /\u003e\n      \u003cButton onPress={this.submit}\u003eLogin\u003c/Button\u003e\n    \u003c/View\u003e\n  );\n  submit = () =\u003e {\n    if (!Input.isValid('email')) {\n      this.setState({error: Input.getErrorMessage('email')});\n    } else {\n      this.setState({error: ''}, () =\u003e {\n        this.props.submit(this.state.email, this.state.team);\n      });\n    }\n  };\n}\n\n```\n\n# Components\n\n## `\u003cButton\u003e`\n\n```javascript\nimport React, {Component} from 'react';\nimport {Button} from 'reactors-form';\n\nclass MyButton extends Component {\n  render() {\n    return (\n      \u003cButton onPress={(event) =\u003e console.log('Pressed!')}\u003e\n        Some text or components here ...\n      \u003c/Button\u003e\n    );\n  }\n}\n```\n\n### `onPress: (event: Event) =\u003e void`\n\nA function to be called when user presses button.\n\n### `style: any`\n\nA style that can overwrite button's default style.\n\n## `\u003cInput /\u003e`\n\n### `confirm: boolean` default `false`\n\n**Only applicable with `password`**. Show a second input to confirm password. If the two passwords do not match, it will fail on validate.\n\n```javascript\n\u003cInput\n  confirm\n  password\n/\u003e\n```\n\n### `email: boolean` default `false`\n\nIt will fail on validate if not a valid email address. You can specify your own regex via `match`.\n\n```javascript\n\u003cInput\n  email\n  match={/\\.gmail\\.com$/}\n/\u003e\n```\n\n### `max: number | Date` default `Infinity`\n\nIf it is a text input, it will fail to validate if characters length is greater than `max`.\nIt it is a number, it will fail to validate if value is greater than `max`.\nIf it is a date, it will fail to validate if value is after `max`.\n\n```javascript\n\u003cInput\n  max={100}\n/\u003e\n\n\u003cInput\n  number\n  max={100}\n/\u003e\n\n\u003cInput\n  date\n  max={Date.now()}\n/\u003e\n```\n\n### `min: number | Date` default `Infinity`\n\nIf it is a text input, it will fail to validate if characters length is lesser than `min`.\nIt it is a number, it will fail to validate if value is lesser than `min`.\nIf it is a date, it will fail to validate if value is before `min`.\n\n```javascript\n\u003cInput\n  min={100}\n/\u003e\n\n\u003cInput\n  number\n  min={100}\n/\u003e\n\n\u003cInput\n  date\n  min={Date.now()}\n/\u003e\n```\n\n### `onChange: (value: string) =\u003e void`\n\nAn action called every time the input changes. First argument is input's current value.\n\n### `required: boolean` default `false`\n\nIt will fail on validate if value is empty.\n\n```javascript\n\u003cInput\n  required\n/\u003e\n```\n\n## `\u003cRange\u003e`\n\n## `\u003cSwitch\u003e`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fco2-git%2Freactors-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fco2-git%2Freactors-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fco2-git%2Freactors-form/lists"}