Simple React Form
Simple React Form is a library to make reusable form components in React and React Native and works great with Meteor
This is just a framework, you must create the form components that you will use.
If you use material-ui you are lucky, because I published a material-ui set of components. simple-react-form-material-ui.
Made for Meteor, but works without Meteor too. This package was inspired by aldeed's autoform.
To use with react native check here
Installation
Install the base package
npm install --save simple-react-form
If you use material-ui install that package too
npm install --save simple-react-form-material-ui
If you don't use material-ui check the contributions if there is a package for you.
Browse the examples.
Example
Component { superprops thisstate = {} } { return <div> <Form state=thisstate onChange= this> <Field fieldName='name' label='Name' type=Text/> <Field fieldName='date' label='A Date' type=DatePicker/> </Form> <p> My name is thisstatename </p> </div> }
You can find more examples here.
Contributions
- simple-react-form-material-ui Material UI set of fields.
- simple-react-form-bootstrap Bootstrap set of fields.
Docs
Using with state
In this example, the current value of the form will be stored in this.state
Component { superprops thisstate = {} } { return <div> <Form state=thisstate onChange= this> <Field fieldName='name' label='Name' type=Text/> <Field fieldName='date' label='A Date' type=DatePicker/> </Form> <p> My name is thisstatename </p> </div> }
Use with Meteor Simple Schema
Automatic forms creation with aldeed/meteor-simple-schema and React.
srf
field for schemas
Allow With simple-schema you must define the object attributes that are not the basics.
Just add this code once in your app.
SimpleSchema
Basic Example
Schema
const Posts = 'posts' Posts
An insert form.
import React from 'react'import Form from 'simple-react-form'import Posts from '../../collections/posts' Component { return <div> <h1>Create a post</h1> <Form = ='insert' ='form' =/> <RaisedButton ='Create' =/> </div> }
An update form.
import React from 'react'import Form Field from 'simple-react-form'import Posts from '../../collections/posts' Component { return <div> <h1>Post update</h1> <Form = ='update' ='form' => <Field ='title'/> <Field ='body'/> </Form> <RaisedButton = ='Save' =/> </div> }
Custom Input Types
React Simple Form is built from the idea that you can create custom components easily.
Basically this consist in a component that have the prop value
and the prop onChange
.
You must render the value
and call onChange
passing the new value
when the value has changed.
You can also pass props to this components setting them in the srf parameter of the simple-schema object:
import UploadImage from '../components/my-fields/upload'
Post.attachSchema({
picture: {
type: String,
srf: {
type: UploadImage,
squareOnly: true
}
}
})
Or simply in the field while rendering:
<Field fieldName='picture' type=UploadImage squareOnly=true/>
Creating the field type
You must create a React component. Check the props that are passed by default here
Component { return <div> <p> thispropslabel </p> <img src=thispropsvalue /> <TextField value=thispropsvalue hintText='Image Url' onChange= thisprops /> <p> thispropserrorMessage </p> </div> ; }
You can view the full list of props here.
Props that are not define in propTypes will be stored in this.passProps
and deleted from propTypes.
React Native
With React Native the api is the same, but you must pass the option useFormTag={false}
to the form.
Example:
You must create all your field types (Maybe someone makes a package in the future!)
Component { return <View> <TextInput style=height: 40 borderColor: 'gray' borderWidth: 1 onChangeText=thispropsonChange value=thispropsvalue/> </View> }
Render the form in the component you want
<Form state=thisstate onChange= this useFormTag=false> <View> <Field fieldName='email' type=Text/> <Field fieldName='password' type=Text/> </View></Form>
You should always render your fields inside a View when using react native.