Skip to content

Commit c1b25fa

Browse files
KevnzKevnz
committed
Add form hook
1 parent 9489acd commit c1b25fa

File tree

5 files changed

+185
-0
lines changed

5 files changed

+185
-0
lines changed

‎readme.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ Useful React Hooks
44

55
* [`useAsync`](#async-hook) - Hook to an async function
66
* [`useFetch`](#fetch-hook) - Hook to use Fetch
7+
* [`useForm`](#form-hook) - Hook to make using forms super easy
78
* [`useGet`](#get-hook) - Hook to make a get request
89
* [`usePost`](#post-hook) - Hook to make an HTTP Post
910
* [`useClickOutside`](#click-outside-hook) - Hook to handle a click outside an element
@@ -82,6 +83,74 @@ export default () => {
8283
}
8384
```
8485
86+
## Form Hook
87+
88+
```javascript
89+
import React, { useState } from 'react'
90+
import { useForm } from '@brightleaf/react-hooks'
91+
export default () => {
92+
const { addToForm, onSubmit } = useFetch()
93+
94+
return (
95+
<form
96+
onSubmit={onSubmit(data => {
97+
console.info('onsubmit handler', data)
98+
})}
99+
>
100+
<fieldset>
101+
<legend>Form Hook</legend>
102+
<input
103+
name="firstName"
104+
type="text"
105+
ref={addToForm}
106+
defaultValue="Brightleaf"
107+
/>
108+
<input
109+
name="lastName"
110+
type="text"
111+
ref={addToForm}
112+
defaultValue="Hooks"
113+
/>
114+
<br />
115+
<select ref={addToForm} name="dropdown" defaultValue="13">
116+
<optgroup label="First Group">
117+
<option value="1">First</option>
118+
<option value="2">Second</option>
119+
<option value="3">Third</option>
120+
</optgroup>
121+
<optgroup label="Second Group">
122+
<option value="11">Second First</option>
123+
<option value="12">Second Second</option>
124+
<option value="13">Second Third</option>
125+
</optgroup>
126+
</select>
127+
<br />
128+
<input type="checkbox" name="check" defaultChecked ref={addToForm} />
129+
<br />
130+
<div>
131+
<label>The Radio</label>
132+
<div>
133+
<label> First </label>
134+
<input name="rgroup" type="radio" value="first" ref={addToForm} />
135+
</div>
136+
<div>
137+
<label> Second </label>
138+
<input
139+
name="rgroup"
140+
type="radio"
141+
value="second"
142+
ref={addToForm}
143+
/>
144+
</div>
145+
</div>
146+
<br />
147+
<button type="submit">Submit</button>
148+
</fieldset>
149+
</form>
150+
)
151+
}
152+
```
153+
85154
## GraphQL Hook
86155
87156
```javascript

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import useEvent from './use-event'
66
import useEventListener from './use-event-listener'
77
import useFavicon from './use-favicon'
88
import useFetch from './use-fetch'
9+
import useForm from './use-form'
910
import useGet from './use-get'
1011
import { useQuery } from './use-query'
1112
import useKeypressed from './use-keypressed'
@@ -34,6 +35,7 @@ export {
3435
useEventListener,
3536
useFavicon,
3637
useFetch,
38+
useForm,
3739
useGet,
3840
useKeypressed,
3941
useKeypress,

‎src/use-form.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* useForm Hook.
3+
* Use Form Hook to allow for better form management
4+
*/
5+
const useForm = () => {
6+
const formElements = []
7+
8+
const addToForm = function(ref) {
9+
formElements.push(ref)
10+
}
11+
12+
return {
13+
addToForm,
14+
onSubmit: fn => {
15+
return submitEvent => {
16+
submitEvent.preventDefault()
17+
const data = formElements.reduce((formValues, current) => {
18+
if (current.type === 'checkbox') {
19+
formValues[current.name] = current.checked
20+
} else if (current.type === 'radio') {
21+
if (current.checked) {
22+
formValues[current.name] = current.value
23+
}
24+
} else {
25+
formValues[current.name] = current.value
26+
}
27+
28+
return formValues
29+
}, {})
30+
31+
fn(data)
32+
}
33+
},
34+
}
35+
}
36+
37+
export default useForm

‎working/app/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import createHashSource from 'hash-source'
1010
import Intro from './intro'
1111
import Home from './home'
1212
const Fetch = React.lazy(() => import('../hooks/fetcher'))
13+
const FormHook = React.lazy(() => import('../hooks/form'))
1314
const Graph = React.lazy(() => import('../hooks/graph'))
1415
const Grapher = React.lazy(() => import('../hooks/grapher'))
1516
const Getter = React.lazy(() => import('../hooks/getter'))
@@ -58,6 +59,7 @@ const Menu = () => {
5859
</ul>
5960
<p className="menu-label">General</p>
6061
<ul className="menu-list">
62+
<TabLink to="/examples/form">Form</TabLink>
6163
<TabLink to="/examples/local">Local Storage</TabLink>
6264
<TabLink to="/examples/cookie">Cookies</TabLink>
6365
<TabLink to="/examples/keypress">Key Press</TabLink>
@@ -119,6 +121,7 @@ export default class App extends Component {
119121
<Home path="/" />
120122
<Home path="*" />
121123
<Fetch path="/examples" />
124+
<FormHook path="/examples/form" />
122125
<Getter path="/examples/getter" />
123126
<Graph path="/examples/graph" />
124127
<Grapher path="/examples/grapher" />

‎working/hooks/form.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React, { useState } from 'react'
2+
import { useTitle, useFavicon, useForm } from '@brightleaf/react-hooks'
3+
export default () => {
4+
useTitle('useForm example from @brightleaf/react-hooks')
5+
const [formValues, setFormValues] = useState()
6+
const { addToForm, onSubmit } = useForm()
7+
8+
return (
9+
<div className="App content">
10+
<pre>{formValues}</pre>
11+
<form
12+
onSubmit={onSubmit(data => {
13+
console.info('onsubmit handler', data)
14+
setFormValues(JSON.stringify(data, null, 2))
15+
})}
16+
>
17+
<fieldset>
18+
<legend>Form Hook</legend>
19+
<input
20+
name="firstName"
21+
type="text"
22+
ref={addToForm}
23+
defaultValue="Kevin"
24+
/>
25+
<input
26+
name="lastName"
27+
type="text"
28+
ref={addToForm}
29+
defaultValue="Isom"
30+
/>
31+
<br />
32+
<select ref={addToForm} name="dropdown" defaultValue="13">
33+
<optgroup label="First Group">
34+
<option value="1">First</option>
35+
<option value="2">Second</option>
36+
<option value="3">Third</option>
37+
</optgroup>
38+
<optgroup label="Second Group">
39+
<option value="11">Second First</option>
40+
<option value="12">Second Second</option>
41+
<option value="13">Second Third</option>
42+
</optgroup>
43+
<optgroup label="Third Group">
44+
<option value="21">Third First</option>
45+
<option value="22">Third Second</option>
46+
<option value="23">Third Third</option>
47+
</optgroup>
48+
</select>
49+
<br />
50+
<input type="checkbox" name="check" defaultChecked ref={addToForm} />
51+
<br />
52+
<div>
53+
<label>The Radio</label>
54+
<div>
55+
<label> First </label>
56+
<input name="rgroup" type="radio" value="first" ref={addToForm} />
57+
</div>
58+
<div>
59+
<label> Second </label>
60+
<input
61+
name="rgroup"
62+
type="radio"
63+
value="second"
64+
ref={addToForm}
65+
/>
66+
</div>
67+
</div>
68+
<br />
69+
<button type="submit">Submit</button>
70+
</fieldset>
71+
</form>
72+
</div>
73+
)
74+
}

0 commit comments

Comments
 (0)