m-hooks

> A set of reusable react hooks


Install

``bash
npm install --save m-hooks
`
or
`bash
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 } |

$3


`js
import React from 'react'
import { useFetch } from 'm-hooks'

const App = () => {
const { response, loading, error } = useFetch(
'https://jsonplaceholder.typicode.com/todos/1'
)
return (

useFetch Usage

{loading &&

加载中...

}
{error &&

出错了...

}
{response &&

{response.title}

}

)
}
`

$3

$3

`js
import { useDebounce, useThrottle } from 'm-hooks'

const debounceCancel = useDebounce(() => {
// callback
}, 2000, [a])

const throttleCancel = useThrottle(() => {
// callback
}, 2000, [a])
`

$3


`js
useTitle('document title')
`

$3

`js
import {useField} from 'm-hooks'

const MyComponent = () => {
const { value, bind } = useField('Type Here...')

return (

input text:
{value}

)
}
`

$3

#### Arguments
- containerRef: the ref of the container element.
- f: () => void: f is called when click area is inside the contianer element.

$3

#### Arguments
- containerRef: the ref of the container element.
- f: () => void: f is called when click area is outside the contianer element.

$3

Similar to componentDidMount in React class component.
#### Arguments
- f: () => void: f is called when component did mount.
`js
useDidMount(() => {
console.log('componentDidMount')
})
`

$3

Close to the componentWillUnmount in React class component.
#### Arguments
- f: () => void: f is called when component will unmount.
`js
useWillUnmount(() => {
console.log('componentWillUnmount')
})
`

$3

Similar to componentDidUpdate, it only runs on updates.
#### Arguments
- f: () => Function | void: f is called on every updates. Like useEffect, f can return a clean-up function.
- dependencies?: Array: Optional array for conditionally firing an effect, same as the second argument passed to useEffect.
`js
useDidUpdate(() => {
console.log('ComponentDidUpdate')
})

useDidUpdate(() => {
console.log('ComponentDidUpdate')
}, [dep1, dep2])
`

$3


`js
import { useToggle } from 'm-hooks'

const Toggle = () => {
const { on, toggle, reset } = useToggle(false)
return (

{String(on)}
toggle
reset

)
}
`

$3

` js
import { useHover } from 'm-hooks'

const Hover = () => {
const { hovered, bind } = useHover()
return (


hovered:
{String(hovered)}


)
}
``

$3

License

MIT © edwardwang0302

---

This hook is created using create-react-hook.