@@ -3,7 +3,57 @@ name: Form
33menu : 3. Form Containers
44---
55
6+ import { Props , Prop , ChildrenProps , ChildrenProp } from ' ../_ui/PropsTable'
7+ import { Form } from ' ../../dist/react-powerplug.esm'
8+
69# Form
710
8- > This component has not yet been documented, if you wish to help us, click the "Edit Page"
9- > button above and help us create better documentation for react-powerplug!
11+ The Form component is used for form with multiples fields and a submit handler
12+
13+ ## Usage
14+
15+ ``` js
16+ import { Form } from ' react-powerplug'
17+ ```
18+
19+ ``` jsx
20+ < Form initial= {{ firstName: ' ' , lastName: ' ' }}>
21+ {({ field, values }) => (
22+ < form
23+ onSubmit= {e => {
24+ e .preventDefault ()
25+ console .log (' Form Submission Data:' , values)
26+ }}
27+ >
28+ < input
29+ type= " text"
30+ placeholder= " Your First Name"
31+ {... field (' firstName' ).bind }
32+ / >
33+ < input
34+ type= " text"
35+ placeholder= " Your Last Name"
36+ {... field (' lastName' ).bind }
37+ / >
38+ < input type= " submit" value= " All Done!" / >
39+ < / form>
40+ )}
41+ < / Form>
42+ ```
43+
44+ ## Props
45+
46+ <Props >
47+ <Prop name = " initial" type = " object" default = { " {}" } >
48+ Specifies the initial state for fields in the form (Object with keys is name of fields)
49+ </Prop >
50+ <Prop name = " onChange" type = " function" >
51+ The onChange event of the Value is called whenever the on state changes.
52+ </Prop >
53+ <Prop name = " children" type = " function" >
54+ Receive state as function. It can also be ` render ` prop.
55+ </Prop >
56+ </Props >
57+
58+ ## Children Props
59+
0 commit comments