react-formalize
- serialize forms with react
- pass defaults to form or input
- easy two-way data binding
- validation messages
- works great with flux, redux and friends
- fully customizable
Demos
Table of Contents
Installation
npm install react-formalize --save
Usage
;; { console; // { // title: 'Lorem ipsum dolor ist', // category: 'news' // }; } { const post = title: 'Lorem ipsum dolor ist' category: 'news' ; return <Form values=post onSubmit=thishandleSubmit onChange=thishandleChange> <div> <label>Title</label> <Text name="title" placeholder="Enter title"/> </div> <div> <label>Category</label> <Select name="category" placeholder="Choose category..." options=news: 'News' sport: 'Sport'/> </div> <div> <button type="submit">Submit</button> </div> </Form> ; }
API
Primitives
<Form>
Form component, manages data and events
Props
view
: (Function) the element your content will be rendered inchildren
: (Component|Function) children componentsvalues
: (Object) the form's initial valuesmessages
: (Object) validation messages by input namesonSubmit
: (Function) submit handleronChange
: (Function) change handlerdisabled
: (Boolean) disable form and it inputs
Example
<Form onSubmit=thisonSubmit onChange=thisonChange values=post messages=messages disabled=saving> /* Input components ... */</Form>
<Input>
Input component wrapper, connects to Form
component, receives and propagates data, do not use directly.
Props
name
: (String) name of the input fieldvalue
: (Array|Boolean|Number|Object|String) value of the input fieldserialize
: (Function) function that extracts the input's data from the change eventchildren
: (Component) children components
Example
;; { return ; } { return <Input ...thisprops> <input type="text" ...props/> </Input> ; }
<Message>
Message component, connects to Form
component, receives messages
Props
name
: (String) name of the related input fieldrenderMessage
: (Function) render a custom messagechildren
: (Function) children components
Example
<Form> <Text name="title"/> <Message name="title"> <p>message</p></Message></Form>
Build in input components
<Text>
Native text input component
Props
name
: (String) name of the input fieldtype
: (String) One of:text
,date
,datetime
,datetime-local
,email
,month
,number
,password
,tel
,time
,search
,url
,week
. Default is text
Example
<Form> <Input name="title"/> <button type="submit">Submit</button></Form>
Examples
Run the simple example:
cd react-formalizenpm installcd react-formalize/examples/simplenpm installnpm start
License
MIT