formsy-material-ui
formsy-react is a form validation component for React forms. This is a wrapper for Material-UI form components to allow them to be used with formsy-react.
Installation
$ npm install formsy-material-ui
Note: For React 0.13.x compatibility, specify formsy-react 0.14.1 in your app.
NB: Material-UI 0.14.1 introduced a regression that made it incompatible with CommonJS require(). Please use Material-UI 0.14.2 or above.
Usage
Note: for FormsyText
you must use value
instead of defaultValue
to set a default value.
As of 0.3.0 the library is split into separate modules, so you can import only those needed for a particular form. This will save overhead particularly if you are not using the Date and / or Time components.
var FormsyCheckbox = ;var FormsyDate = ;var FormsyRadio = ;var FormsyRadioGroup = ;var FormsySelect = ;var FormsyText = ;var FormsyTime = ;var FormsyToggle = ;
If you prefer you can import the whole library, and associated MUI components, by requiring formsy-material-ui
this will have the same footprint, regardless of which components you chose to assign in the following line(s):
ES6:
const FMUI = ;const FormsyCheckbox FormsyDate FormsyRadio FormsyRadioGroup FormsySelect FormsyText FormsyTime FormsyToggle = FMUI;
ES5:
var FMUI = ;var FormsyCheckbox = FMUIFormsyCheckbox;var FormsyDate = FMUIFormsyDate;var FormsyRadio = FMUIFormsyRadio;var FormsyRadioGroup = FMUIFormsyRadioGroup;var FormsySelect = FMUIFormsySelect;var FormsyText = FMUIFormsyText;var FormsyTime = FMUIFormsyTime;var FormsyToggle = FMUIFormsyToggle;
Events
As of 0.3.8, components allow for onChange
event handlers in props. They are fired when the value of the
component changes, regardless of the underlying handler (eg, FomrsyToggle
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.
An example usage of this would be to use an onChange
for the FormsySelect and receive notifications when it changes.
Examples
Example App
Live demo, code: formsy-material-ui
Example Code
const FMUI = ;const FormsyCheckbox FormsyDate FormsyRadio FormsyRadioGroup FormsySelect FormsyText FormsyTime FormsyToggle = FMUI;const RaisedButton = ; const Form = React;
Material-ui provides a .focus()
method for some its components, such as TextField
. formsy-material-ui components wrap Material-UI components, and if the underlying Material-UI component has a .focus()
method, then the formsy-material-ui components will also expose a .focus()
method, which just delegates to the underlying Material-UI component's .focus()
.
In the example below, we implement part of a chat-messaging application. The component is a form that provides a text input and a submit button; users can enter their message in the input and send it with the submit button. As a UX feature, we clear the form (resetForm()
) and put the user's cursor back in the text field (this.messageInput.focus()
) so that the user can easily begin to type his or her next message. We set a React ref
on the FormsyText
component (setting it to this.messageInput
) in order to have access to it and use .focus()
.
import React Component PropTypes from 'react'import Form from 'formsy-react'import RaisedButton from 'material-ui/lib/raised-button'import FormsyText from 'formsy-material-ui/lib/FormsyText' { thissubmit = thissubmit this thismessageInput = c } { thisprops thismessageInput } { return <Form => <FormsyText = ="message" ="What's on your mind?" ="isAlpha,minLength:1,maxLength:1000" /> <RaisedButton ="submit" = ="SEND" /> </Form> } ChatMessageFormpropTypes = submitMessage: PropTypesfuncisRequired
Known Issues
See issues.
Release History
See CHANGELOG.md
Acknowledgements
Originally based on an example by Ryan Blakeley.
Thanks to our contributors.