A set of fields for simple-react-form that use material-ui
MIT License
Simple React Form is a powerful framework that simplifies the use of forms in React and React Native. This is a set of components that use Material UI.
To use this fields, import the field and pass it as type
to the Field
component.
<Form state={this.state} onChange={changes => this.setState(changes)}>
<Field fieldName='name' label='Name' type={Text}/>
<Field fieldName='date' label='A Date' type={DatePicker}/>
</Form>
List of the components
import Checkbox from 'simple-react-form-material-ui/lib/checkbox'
Type: Boolean
Renders the material-ui date picker
import DatePicker from 'simple-react-form-material-ui/lib/date-picker'
Type: Date
Select multiple items from a array
import MultipleCheckbox from 'simple-react-form-material-ui/lib/multiple-checkbox'
Type: [String|Number]
Props:
options
: A array of
label
String
: The label of the optionvalue
String|Number
: The valuedescription
String
Optional: A description that will be rendered below the optionSelect one item from a array
import Radio from 'simple-react-form-material-ui/lib/radio'
Type: String|Number
Props:
options
: A array of
label
String
: The label of the optionvalue
String|Number
: The valuedescription
String
Optional: A description that will be rendered below the optionA text field that searchs items with meteor methods
import SelectWithMethod from 'simple-react-form-material-ui/lib/select-with-method'
Type: String|Number
Props:
multi
Boolean
Optional: Allow to select multiple items.methodName
String
: Meteor method that recieves the search string and returns an array of
label
String
: The visible text.value
String|Number
: The value.color
String
Optional: The background color of the chipimage
String
Optional: The url of the imageinitals
String
Optional: The initals of the chip. Don't provide this if image is present.labelMethodName
String
: Meteor method that recieves the value and must return the item description. If multi
is set to true, this will recieve an array of the values and must return an array with the items descriptions in the same order. Item description is the same as the one returned in methodName
:
label
String
: The visible text.value
String|Number
: The value.color
String
Optional: The background color of the chipimage
String
Optional: The url of the imageinitals
String
Optional: The initals of the chip. Don't provide this if image is present.connection
Optional, defaults to Meteor
: A Meteor connection.waitTime
Optional, defaults to 400
: Time with no changes that activates the search.create
Function
Optional: A function that creates a document and pass the value in a callback.createLabel
Function
Optional: A function that recieves the search input and returns the create label.canCreate
Function
Optional, defaults to () => true
: A function that recieves the search input and returns a Boolean
indicating if create
can be called.Select one item from a array in a select field
import Select from 'simple-react-form-material-ui/lib/select'
Type: String|Number
Props:
options
: A array of
label
String
: The label of the optionvalue
String|Number
: The valueCreate a array of Strings.
import Tags from 'simple-react-form-material-ui/lib/tags'
Type: [String]
import Text from 'simple-react-form-material-ui/lib/text'
Type: String
Props:
fieldType
String
Optional: The type of the input. Example: number, email, password.A String with multiple lunes
import Textarea from 'simple-react-form-material-ui/lib/textarea'
Type: String
import Toggle from 'simple-react-form-material-ui/lib/toggle'
Type: Boolean
import ObjectComponent from 'simple-react-form-material-ui/lib/object'
Type: Object
Usage:
<Form>
<Field fieldName='myObject' type={ObjectComponent}>
<Field fieldName='myField' type={Text}/>
<Field fieldName='myField2' type={Text}/>
</Field>
</Form>
import ArrayComponent from 'simple-react-form-material-ui/lib/array'
Type: Array
Usage:
<Form>
<Field fieldName='myArray' type={ArrayComponent}>
<Field fieldName='myField' type={Text}/>
<Field fieldName='myField2' type={Text}/>
</Field>
</Form>