1.0.4 • Published 4 years ago
m-hooks v1.0.4
m-hooks
A set of reusable react hooks
Install
npm install --save m-hooks
or
yarn add m-hooks
Hooks
Name | Arguments | Returns |
---|---|---|
useFetch | url, options | response, error, loading |
useDebounce | f, time, dependencies | cancel |
useThrottle | f, time, dependencies | cancel |
useClickInside | containerRef, f | |
useClickOutside | containerRef, f | |
useField | initial | { value, set, reset, bind } |
useTitle | title | |
useDidMount | f | - |
useWillUnmount | f | - |
useDidUpdate | f, dependencies | - |
useToggle | initial | { on, set, reset, toggle } |
useHover | - | { hovered, bind } |
useFocus | - | { focused, bind } |
useFetch(url, options?)
import React from 'react'
import { useFetch } from 'm-hooks'
const App = () => {
const { response, loading, error } = useFetch(
'https://jsonplaceholder.typicode.com/todos/1'
)
return (
<div>
<h1>useFetch Usage</h1>
{loading && <p>加载中...</p>}
{error && <p>出错了...</p>}
{response && <p>{response.title}</p>}
</div>
)
}
useDebounce(f, time?, deps?)
useThrottle(f, time?, deps?)
import { useDebounce, useThrottle } from 'm-hooks'
const debounceCancel = useDebounce(() => {
// callback
}, 2000, [a])
const throttleCancel = useThrottle(() => {
// callback
}, 2000, [a])
useTitle(title)
useTitle('document title')
useField(initial)
import {useField} from 'm-hooks'
const MyComponent = () => {
const { value, bind } = useField('Type Here...')
return (
<div>
input text:
{value}
<input type="text" {...bind} />
</div>
)
}
useClickInside(containerRef, f)
Arguments
containerRef
: the ref of the container element.f: () => void
: f is called when click area is inside the contianer element.
useClickOutside(containerRef, f)
Arguments
containerRef
: the ref of the container element.f: () => void
: f is called when click area is outside the contianer element.
useDidMount(f)
Similar to componentDidMount
in React class component.
Arguments
f: () => void
: f is called when component did mount.
useDidMount(() => {
console.log('componentDidMount')
})
useWillUnmount(f)
Close to the componentWillUnmount
in React class component.
Arguments
f: () => void
: f is called when component will unmount.
useWillUnmount(() => {
console.log('componentWillUnmount')
})
useDidUpdate(f, deps?)
Similar to componentDidUpdate
, it only runs on updates.
Arguments
f: () => Function | void
: f is called on every updates. LikeuseEffect
, f can return a clean-up function.dependencies?: Array<any>
: Optional array for conditionally firing an effect, same as the second argument passed touseEffect
.
useDidUpdate(() => {
console.log('ComponentDidUpdate')
})
useDidUpdate(() => {
console.log('ComponentDidUpdate')
}, [dep1, dep2])
useToggle(initial)
import { useToggle } from 'm-hooks'
const Toggle = () => {
const { on, toggle, reset } = useToggle(false)
return (
<div>
{String(on)}
<button onClick={toggle}>toggle</button>
<button onClick={reset}>reset</button>
</div>
)
}
useHover()
import { useHover } from 'm-hooks'
const Hover = () => {
const { hovered, bind } = useHover()
return (
<div>
<div {...bind}>
hovered:
{String(hovered)}
</div>
</div>
)
}
useFocus()
License
MIT © edwardwang0302
This hook is created using create-react-hook.