Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/formsy/formsy-material-ui
A Formsy compatibility wrapper for Material-UI form components
https://github.com/formsy/formsy-material-ui
Last synced: about 2 months ago
JSON representation
A Formsy compatibility wrapper for Material-UI form components
- Host: GitHub
- URL: https://github.com/formsy/formsy-material-ui
- Owner: formsy
- License: mit
- Created: 2015-10-10T09:46:49.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:04:10.000Z (over 1 year ago)
- Last Synced: 2024-06-27T21:19:50.402Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.09 MB
- Stars: 571
- Watchers: 22
- Forks: 149
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ⚠️ Help Wanted ⚠️
This package is currently under active restoration after a long hiatus, and all help is appreciated, especially MUI users.
# formsy-material-ui [](https://badge.fury.io/js/formsy-material-ui) [](https://travis-ci.org/mbrookes/formsy-material-ui)
This library is a wrapper for [Material-UI](http://material-ui.com/) form components to allow them to be used with
[formsy-react](https://github.com/formsy/formsy-react), a form validation component for React forms.
## Installation
To and install formsy-material-ui and add it to your `package.json`, run:
```
$ yarn add formsy-material-ui
```
You will also need to add these peer dependencies if not already installed:
- `create-react-class`
- `[email protected]`
- `[email protected]`
- `react-dom`
- `react`
## Usage
```ts
import {
FormsyAutoComplete,
FormsyCheckbox,
FormsyDate,
FormsyRadio,
FormsyRadioGroup,
FormsySelect,
FormsyText,
FormsyTime,
FormsyToggle,
} from 'formsy-material-ui';
```
### Events
Components allow for `onChange` event handlers in props. They are fired when the value of the component changes,
regardless of the underlying handler (eg, `FormsyToggle` uses `onToggle` internally, but we still use `onChange` in
props to hook into the event.)
The call back signatures for all `onChange` handlers conform to Material-UI's proposed
[Standardized Callback Signatures](https://github.com/mui-org/material-ui/issues/2957).
An example usage of this would be to use an `onChange` for the FormsySelect and receive notifications when it changes.
### Example Form
```tsx
import React from 'react';
import createClass from 'create-react-class';
import Formsy from 'formsy-react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Paper from 'material-ui/Paper';
import RaisedButton from 'material-ui/RaisedButton';
import MenuItem from 'material-ui/MenuItem';
import {
FormsyCheckbox,
FormsyDate,
FormsyRadio,
FormsyRadioGroup,
FormsySelect,
FormsyText,
FormsyTime,
FormsyToggle,
FormsyAutoComplete,
} from 'formsy-material-ui/lib';
const Main = createClass({
/**
* As an alternative to `MuiThemeProvider` you can add a theme directly into context.
* See the [Material-UI themes](http://www.material-ui.com/#/customization/themes) docs for details.
*
* childContextTypes: {
* muiTheme: PropTypes.object,
* },
* getChildContext(){
* return {
* muiTheme: getMuiTheme(),
* }
* },
*/
getInitialState() {
return {
canSubmit: false,
};
},
errorMessages: {
wordsError: 'Please only use letters',
numericError: 'Please provide a number',
urlError: 'Please provide a valid URL',
},
styles: {
paperStyle: {
width: 300,
margin: 'auto',
padding: 20,
},
switchStyle: {
marginBottom: 16,
},
submitStyle: {
marginTop: 32,
},
},
enableButton() {
this.setState({
canSubmit: true,
});
},
disableButton() {
this.setState({
canSubmit: false,
});
},
submitForm(data) {
alert(JSON.stringify(data, null, 4));
},
notifyFormError(data) {
console.error('Form error:', data);
},
render() {
let { paperStyle, switchStyle, submitStyle } = this.styles;
let { wordsError, numericError, urlError } = this.errorMessages;
return (
);
},
});
export default Main;
```
## Known Issues
See [issues](https://github.com/formsy/formsy-material-ui/issues).
## Release History
See [CHANGELOG.md](https://github.com/formsy/formsy-material-ui/blob/master/CHANGELOG.md)
## Acknowledgements
Originally started by [Matt Brookes](https://github.com/mbrookes), later transfered to [Ryan Blakeley](@rojobuffalo)
before joining the Formsy Organization.
Thanks to our [contributors](https://github.com/formsy/formsy-material-ui/graphs/contributors).
## Alternatives
Here are some alternative solutions you might also wish to consider:
- [Validation component for material-ui forms](https://github.com/NewOldMax/react-material-ui-form-validator)
- Redux Form [Material-UI example](https://redux-form.com/6.6.2/examples/material-ui/)
- [MobX React Form](https://github.com/foxhound87/mobx-react-form)