{"id":18285897,"url":"https://github.com/exodusmovement/react-form","last_synced_at":"2025-04-05T07:32:36.783Z","repository":{"id":65489823,"uuid":"235630114","full_name":"ExodusMovement/react-form","owner":"ExodusMovement","description":"A simple React form component.","archived":false,"fork":false,"pushed_at":"2023-01-23T16:06:57.000Z","size":196,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-03-21T00:33:06.503Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ExodusMovement.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-22T17:46:08.000Z","updated_at":"2022-03-25T17:51:03.000Z","dependencies_parsed_at":"2023-02-13T00:45:59.134Z","dependency_job_id":null,"html_url":"https://github.com/ExodusMovement/react-form","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/ExodusMovement%2Freact-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExodusMovement%2Freact-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExodusMovement%2Freact-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExodusMovement%2Freact-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ExodusMovement","download_url":"https://codeload.github.com/ExodusMovement/react-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305879,"owners_count":20917201,"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-11-05T13:18:07.626Z","updated_at":"2025-04-05T07:32:31.490Z","avatar_url":"https://github.com/ExodusMovement.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Form Component\n\n### [Live Demo](https://www.exodus.io/job-application/?id=9039189C56\u0026title=Test%20Job%20Post)\n\nA simple React form component to gather data from users.\n\nThe component takes a `fields` prop and generates a form interface. When the user clicks the \"Submit\" button, the `onSubmit` callback is called with a responses object.\n\nServer requests are not within the scope of this componenet; you can do whatever you like with the data that is returned.\n\nThere are a few extra features like validation for required fields, all detailed below.\n\nThe component comes with a set of default styles, which you can override if you like.\n\nIf you have a feature request, please open an issue and we'll get to it asap.\n\n## Installation\n\n```\nyarn add @exodus/react-form\n```\n\nYou will also need some CSS to make it look right. This should be included alongside the component. An example theme can be found in [styles.scss](https://github.com/ExodusMovement/react-form/blob/master/styles.scss)\n\n## Input Types\n\nThe [live demo](https://www.exodus.io/job-application/?id=9039189C56\u0026title=Test%20Job%20Post) demonstrates all supported input types:\n\n- `short_text`: Simple text input.\n- `free_text`: Paragraph input.\n- `boolean`: Displays two radio inputs with \"Yes\" \u0026 \"No\" labels.\n- `dropdown`: Provide an array of `choices`, see below example for details. An option with the text `Select an option…` will be added automatically as the first option. If the field is required, something other than this option must be selected.\n- `multiple_choice`: If `single_answer` is set to true, it displays the options as radio inputs, if not then as checkboxes.\n- `date`: Returns a date in the format yyyy-mm-dd\n- `numeric`: Accepts float as well as int values.\n- `file`: Provide an array of accepted file types when using this type.\n\n## Example Usage\n\nThe following is a complete example which includes:\n\n- A sample array passed as the `fields` prop, showing what data to include for each input type. For example, the `file` type expects a `supported_file_types` array.\n\n- Usage of the `loading` prop: The \"Submit\" button is deactivated when set to true. (optional)\n\n- Usage of `showWarning` and `warningText` props: Shows warning text beneath the \"Submit\" button. (optional)\n\n- Beneath the code example, there is a sample responses object. This is what you can expect the `onSubmit` callback to receive.\n\n```javascript\nimport React from 'react'\nimport ReactForm from '@exodus/react-form'\nimport '~/styles/react-form.scss'\n\n// Example fields data\nconst fields = [\n  {\n    body: 'Full name', // Question text\n    type: 'short_text',\n    required: true,\n    id: '22e55a',\n  },\n  {\n    body: 'Email',\n    type: 'short_text',\n    required: true,\n    validate: 'email',\n    id: '22e55e',\n  },\n  {\n    body: 'Summary',\n    type: 'free_text',\n    required: false,\n    id: '22e55f',\n  },\n  {\n    id: '22e55g',\n    type: 'file',\n    body: 'Resume',\n    supported_file_types: ['pdf', 'doc', 'docx', 'jpg', 'png'],\n    required: false,\n  },\n  {\n    body: 'Test Yes/No',\n    type: 'boolean',\n    required: true,\n    id: '22e560',\n  },\n  {\n    body: 'Test Dropdown',\n    type: 'dropdown',\n    required: true,\n    choices: [\n      { body: 'choice 1', id: '107f36' },\n      { body: 'choice2', id: '107f37' },\n    ],\n    id: '22e561',\n  },\n  {\n    body: 'Test Multiple choice',\n    type: 'multiple_choice',\n    required: true,\n    choices: [\n      { body: 'choice 1', id: '107f38' },\n      { body: 'choice 2', id: '107f39' },\n    ],\n    id: '22e562',\n  },\n  {\n    body: 'Test Multiple choice (single answer)',\n    type: 'multiple_choice',\n    required: true,\n    single_answer: true,\n    choices: [\n      { body: 'choice 1', id: '107f3a' },\n      { body: 'choice 2', id: '107f3b' },\n    ],\n    id: '22e563',\n  },\n  {\n    body: 'Test Date',\n    type: 'date',\n    required: true,\n    id: '22e564',\n  },\n  {\n    body: 'Test Number',\n    type: 'numeric',\n    required: true,\n    id: '22e565',\n  },\n]\n\nclass MyPage extends React.PureComponent {\n  constructor(props) {\n    super(props)\n\n    this.state = {\n      requestPending: false,\n      showWarning: false,\n      warningText: '',\n    }\n\n    this.onSubmit = this.onSubmit.bind(this)\n  }\n\n  onSubmit(responses) {\n    // do whatever, such as parse the response and send to a server\n\n    this.setState({\n      requestPending: true,\n    })\n\n    fetch(`/submit-form`, {\n      method: 'post',\n      body: JSON.stringify({ shortcode: '1234', data: responses }),\n    })\n      .then((response) =\u003e {\n        if (response.status === 200) {\n          window.location.href = '/job-application-submitted'\n        }\n      })\n      .catch((err) =\u003e {\n        console.log(err)\n\n        this.setState({\n          requestPending: false,\n          showWarning: true,\n          warningText: 'There was an error and the application was not submitted!',\n        })\n      })\n  }\n\n  render() {\n    const { requestPending, showWarning, warningText } = this.state\n    return (\n      \u003cReactForm\n        fields={fields}\n        loading={requestPending}\n        showWarning={showWarning}\n        warningText={warningText}\n        onSubmit={this.onSubmit}\n      /\u003e\n    )\n  }\n}\n\nexport default MyPage\n```\n\nExample responses object passed to the `onSubmit` callback as its first parameter. The object keys are the `id`s that were passed to the component with the `fields` prop. For required fields, `isSet` will always be true.\n\n```javascript\n{\n  // short_text\n  '22e55a': { value: 'Barty Crouch', isValid: true, isSet: true },\n\n  // short_text (validate: 'email')\n  '22e55e': { value: 'barty@gmail.com', isValid: true, isSet: true },\n\n  // free_text (required: false)\n  '22e55f': { value: '', isValid: true, isSet: false },\n\n  // file\n  '22e55g': { value: { name: 'file.txt', data: 'alskdfj;ak' }, isValid: true, isSet: true },\n\n  // boolean\n  '22e560': { value: false, isValid: true, isSet: true },\n\n  // dropdown\n  '22e561': { value: ['107f36'], isValid: true, isSet: true },\n\n  // multiple_choice\n  '22e562': { value: ['107f38', '107f39'], isValid: true, isSet: true },\n\n  // multiple_choice (single_answer: true)\n  '22e563': { value: ['107f3a'], isValid: true, isSet: true },\n\n  // date\n  '22e564': { value: '2020-01-24', isValid: true, isSet: true },\n\n  // numeric\n  '22e565': { value: 123, isValid: true, isSet: true },\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexodusmovement%2Freact-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexodusmovement%2Freact-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexodusmovement%2Freact-form/lists"}