{"id":13422201,"url":"https://github.com/formsy/formsy-material-ui","last_synced_at":"2025-04-04T06:08:56.081Z","repository":{"id":42211557,"uuid":"44004836","full_name":"formsy/formsy-material-ui","owner":"formsy","description":"A Formsy compatibility wrapper for Material-UI form components","archived":false,"fork":false,"pushed_at":"2023-01-07T04:04:10.000Z","size":2192,"stargazers_count":571,"open_issues_count":41,"forks_count":148,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-03-28T05:11:22.979Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/formsy.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}},"created_at":"2015-10-10T09:46:49.000Z","updated_at":"2025-02-05T17:23:18.000Z","dependencies_parsed_at":"2023-02-06T11:15:37.192Z","dependency_job_id":null,"html_url":"https://github.com/formsy/formsy-material-ui","commit_stats":null,"previous_names":["mbrookes/formsy-material-ui"],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formsy%2Fformsy-material-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formsy%2Fformsy-material-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formsy%2Fformsy-material-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formsy%2Fformsy-material-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/formsy","download_url":"https://codeload.github.com/formsy/formsy-material-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247128751,"owners_count":20888235,"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-30T23:00:39.047Z","updated_at":"2025-04-04T06:08:56.064Z","avatar_url":"https://github.com/formsy.png","language":"TypeScript","funding_links":[],"categories":["UI Components","\u003ca name=\"TypeScript\"\u003e\u003c/a\u003eTypeScript"],"sub_categories":["Form Components"],"readme":"# ⚠️ Help Wanted ⚠️\n\nThis package is currently under active restoration after a long hiatus, and all help is appreciated, especially MUI users.\n\n# formsy-material-ui [![npm version](https://badge.fury.io/js/formsy-material-ui.svg)](https://badge.fury.io/js/formsy-material-ui) [![Build Status](https://travis-ci.org/mbrookes/formsy-material-ui.svg?branch=master)](https://travis-ci.org/mbrookes/formsy-material-ui)\n\nThis library is a wrapper for [Material-UI](http://material-ui.com/) form components to allow them to be used with\n[formsy-react](https://github.com/formsy/formsy-react), a form validation component for React forms.\n\n## Installation\n\nTo and install formsy-material-ui and add it to your `package.json`, run:\n\n```\n$ yarn add formsy-material-ui\n```\n\nYou will also need to add these peer dependencies if not already installed:\n\n- `create-react-class`\n- `formsy-react@0.19.5`\n- `material-ui@0.18.7`\n- `react-dom`\n- `react`\n\n## Usage\n\n```ts\nimport {\n  FormsyAutoComplete,\n  FormsyCheckbox,\n  FormsyDate,\n  FormsyRadio,\n  FormsyRadioGroup,\n  FormsySelect,\n  FormsyText,\n  FormsyTime,\n  FormsyToggle,\n} from 'formsy-material-ui';\n```\n\n### Events\n\nComponents allow for `onChange` event handlers in props. They are fired when the value of the component changes,\nregardless of the underlying handler (eg, `FormsyToggle` uses `onToggle` internally, but we still use `onChange` in\nprops to hook into the event.)\n\nThe call back signatures for all `onChange` handlers conform to Material-UI's proposed\n[Standardized Callback Signatures](https://github.com/mui-org/material-ui/issues/2957).\n\nAn example usage of this would be to use an `onChange` for the FormsySelect and receive notifications when it changes.\n\n### Example Form\n\n```tsx\nimport React from 'react';\nimport createClass from 'create-react-class';\nimport Formsy from 'formsy-react';\nimport getMuiTheme from 'material-ui/styles/getMuiTheme';\nimport MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';\nimport Paper from 'material-ui/Paper';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport MenuItem from 'material-ui/MenuItem';\nimport {\n  FormsyCheckbox,\n  FormsyDate,\n  FormsyRadio,\n  FormsyRadioGroup,\n  FormsySelect,\n  FormsyText,\n  FormsyTime,\n  FormsyToggle,\n  FormsyAutoComplete,\n} from 'formsy-material-ui/lib';\n\nconst Main = createClass\u003cany, any\u003e({\n  /**\n   * As an alternative to `MuiThemeProvider` you can add a theme directly into context.\n   * See the [Material-UI themes](http://www.material-ui.com/#/customization/themes) docs for details.\n   *\n   * childContextTypes: {\n   *   muiTheme: PropTypes.object,\n   * },\n   * getChildContext(){\n   *   return {\n   *     muiTheme: getMuiTheme(),\n   *   }\n   * },\n   */\n\n  getInitialState() {\n    return {\n      canSubmit: false,\n    };\n  },\n\n  errorMessages: {\n    wordsError: 'Please only use letters',\n    numericError: 'Please provide a number',\n    urlError: 'Please provide a valid URL',\n  },\n\n  styles: {\n    paperStyle: {\n      width: 300,\n      margin: 'auto',\n      padding: 20,\n    },\n    switchStyle: {\n      marginBottom: 16,\n    },\n    submitStyle: {\n      marginTop: 32,\n    },\n  },\n\n  enableButton() {\n    this.setState({\n      canSubmit: true,\n    });\n  },\n\n  disableButton() {\n    this.setState({\n      canSubmit: false,\n    });\n  },\n\n  submitForm(data) {\n    alert(JSON.stringify(data, null, 4));\n  },\n\n  notifyFormError(data) {\n    console.error('Form error:', data);\n  },\n\n  render() {\n    let { paperStyle, switchStyle, submitStyle } = this.styles;\n    let { wordsError, numericError, urlError } = this.errorMessages;\n\n    return (\n      \u003cMuiThemeProvider muiTheme={getMuiTheme()}\u003e\n        \u003cPaper style={paperStyle}\u003e\n          \u003cFormsy.Form\n            onValid={this.enableButton}\n            onInvalid={this.disableButton}\n            onValidSubmit={this.submitForm}\n            onInvalidSubmit={this.notifyFormError}\n          \u003e\n            \u003cFormsyDate name=\"date\" required floatingLabelText=\"Date\" /\u003e\n            \u003cFormsyTime name=\"time\" required floatingLabelText=\"Time\" /\u003e\n            \u003cFormsySelect name=\"frequency\" required floatingLabelText=\"How often do you?\"\u003e\n              \u003cMenuItem value={'never'} primaryText=\"Never\" /\u003e\n              \u003cMenuItem value={'nightly'} primaryText=\"Every Night\" /\u003e\n              \u003cMenuItem value={'weeknights'} primaryText=\"Weeknights\" /\u003e\n            \u003c/FormsySelect\u003e\n            \u003cFormsyAutoComplete\n              name=\"frequency-auto-complete\"\n              required\n              floatingLabelText=\"How often do you?\"\n              dataSource={['Never', 'Every Night', 'Weeknights']}\n            /\u003e\n            \u003cFormsyCheckbox name=\"agree\" label=\"Do you agree to disagree?\" style={switchStyle} /\u003e\n            \u003cFormsyToggle name=\"toggle\" label=\"Toggle\" style={switchStyle} /\u003e\n            \u003cFormsyRadioGroup name=\"shipSpeed\" defaultSelected=\"not_light\"\u003e\n              \u003cFormsyRadio value=\"light\" label=\"prepare for light speed\" style={switchStyle} /\u003e\n              \u003cFormsyRadio value=\"not_light\" label=\"light speed too slow\" style={switchStyle} /\u003e\n              \u003cFormsyRadio value=\"ludicrous\" label=\"go to ludicrous speed\" style={switchStyle} disabled={true} /\u003e\n            \u003c/FormsyRadioGroup\u003e\n            \u003cFormsyText\n              name=\"name\"\n              validations=\"isWords\"\n              validationError={wordsError}\n              required\n              hintText=\"What is your name?\"\n              floatingLabelText=\"Name\"\n            /\u003e\n            \u003cFormsyText\n              name=\"age\"\n              validations=\"isNumeric\"\n              validationError={numericError}\n              hintText=\"Are you a wrinkly?\"\n              floatingLabelText=\"Age (optional)\"\n            /\u003e\n            \u003cFormsyText\n              name=\"url\"\n              validations=\"isUrl\"\n              validationError={urlError}\n              required\n              hintText=\"http://www.example.com\"\n              floatingLabelText=\"URL\"\n              updateImmediately\n            /\u003e\n            \u003cRaisedButton style={submitStyle} type=\"submit\" label=\"Submit\" disabled={!this.state.canSubmit} /\u003e\n          \u003c/Formsy.Form\u003e\n        \u003c/Paper\u003e\n      \u003c/MuiThemeProvider\u003e\n    );\n  },\n});\n\nexport default Main;\n```\n\n## Known Issues\n\nSee [issues](https://github.com/formsy/formsy-material-ui/issues).\n\n## Release History\n\nSee [CHANGELOG.md](https://github.com/formsy/formsy-material-ui/blob/master/CHANGELOG.md)\n\n## Acknowledgements\n\nOriginally started by [Matt Brookes](https://github.com/mbrookes), later transfered to [Ryan Blakeley](@rojobuffalo)\nbefore joining the Formsy Organization.\n\nThanks to our [contributors](https://github.com/formsy/formsy-material-ui/graphs/contributors).\n\n## Alternatives\n\nHere are some alternative solutions you might also wish to consider:\n\n- [Validation component for material-ui forms](https://github.com/NewOldMax/react-material-ui-form-validator)\n- Redux Form [Material-UI example](https://redux-form.com/6.6.2/examples/material-ui/)\n- [MobX React Form](https://github.com/foxhound87/mobx-react-form)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformsy%2Fformsy-material-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformsy%2Fformsy-material-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformsy%2Fformsy-material-ui/lists"}