Material UI - Simple React Form
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=thisstate onChange= this> <Field fieldName='name' label='Name' type=Text/> <Field fieldName='date' label='A Date' type=DatePicker/></Form>
Components
List of the components
Checkbox
Type: Boolean
Date Picker
Renders the material-ui date picker
Type: Date
Multiple Checkbox
Select multiple items from a array
Type: [String|Number]
Props:
options
: A array oflabel
String
: The label of the optionvalue
String|Number
: The valuedescription
String
Optional: A description that will be rendered below the option
Radio
Select one item from a array
Type: String|Number
Props:
options
: A array oflabel
String
: The label of the optionvalue
String|Number
: The valuedescription
String
Optional: A description that will be rendered below the option
Select With Method
A text field that searchs items with meteor methods
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 oflabel
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. Ifmulti
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 inmethodName
: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 toMeteor
: A Meteor connection.waitTime
Optional, defaults to400
: 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 aBoolean
indicating ifcreate
can be called.
Select
Select one item from a array in a select field
Type: String|Number
Props:
options
: A array oflabel
String
: The label of the optionvalue
String|Number
: The value
Tags
Create a array of Strings.
Type: [String]
Text
Type: String
Props:
fieldType
String
Optional: The type of the input. Example: number, email, password.
Textarea
A String with multiple lunes
Type: String
Toggle
Type: Boolean
Object
Type: Object
Usage:
<Form> <Field fieldName='myObject' type=ObjectComponent> <Field fieldName='myField' type=Text/> <Field fieldName='myField2' type=Text/> </Field></Form>
Array
Type: Array
Usage:
<Form> <Field fieldName='myArray' type=ArrayComponent> <Field fieldName='myField' type=Text/> <Field fieldName='myField2' type=Text/> </Field></Form>