Skip to content

Commit 3fabaa2

Browse files
coder054renatorib
authored andcommitted
Update Form docs (#185)
1 parent e316165 commit 3fabaa2

File tree

1 file changed

+52
-2
lines changed

1 file changed

+52
-2
lines changed

docs/components/Form.mdx

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,57 @@ name: Form
33
menu: 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

Comments
 (0)