messy-hooks
v0.3.0
Published
some react hooks
Downloads
3
Readme
Demo
live demo (site looks ugly😅)
Install
npm i messy-hooks
Hooks
Below examples are not in detailed and ready-to-use, checkout examples folder for practical usage.
useRequest
Use fetch
for request, only support json response.
const { makeRequest, requestInfo } = useRequest(url, options);
| name | desc |
| ----------- | ------------------------------------------------------------ |
| url | should be same as fetch
first parameter |
| options | should be same as fetch
second parameter but without body
option |
| makeRequest | a function: (body)=>void
to make a request call |
| requestInfo | an object: { loading, error, errorEntity, data, status }
|
example
import { useRequest, UseRequestStatus } from 'messy-hooks';
function Cmp() {
// 'error' is boolean,
// 'errorEntity' is the actual error object,
// 'status' is a helper enum property for you to identity request status.
const { makeRequest, requestInfo: {loading, error, errorEntity, data, status} } = useRequest("http://xxx.com", {
method: 'POST',
// don't pass `body` here
});
// pass body to `makeRequest`
makeRequest(JSON.stringify({
name: 'leo'
});
if(loading) {}
if(error) { console.err(errorEntity); }
/*
enum UseRequestStatus {
'Idle' = 'Idle', // initial status
'Fetching' = 'Fetching',
'FetchSuccess' = 'FetchSuccess',
'FetchError' = 'FetchError'
}
*/
if(status === UseRequestStatus.FetchSuccess) {}
return <div>{JSON.stringify(data)}</div>
}
useTimer
Get elapsed time, second as unit. Warning: it's not very accurate because it use setInterval
const { timerData, startTimer, stopTimer, resetTimer } = useTimer();
| name | desc |
| ---------- | ------------------------------------------------------------ |
| timerData | an object contains timer data, see below example |
| startTimer | a function, call to start timer |
| stopTimer | a function, call to stop timer |
| resetTimer | a function, call to reset timerData
but not change timer status(running or stopped) |
example
import { useTimer } from 'messy-hooks';
function Cmp() {
const { timerData, startTimer, stopTimer, resetTimer } = useTimer();
// hours*3600 + minuts*60 + seconds = rawSeconds
const { rawSeconds, hours, minutes, seconds } = timerData;
return <div>{JSON.stringify(timerData)}</div>
}
useCanvas
const canvasRef = useCanvas(draw)
| name | desc |
| ---- | ------------------------------------------------------------ |
| draw | should be a function: (context)=>void
. it should be wrapped within useCallback
depend on your usage. |
example
import { useCanvas } from 'messy-hooks';
function Cmp() {
const canvasRef = useCanvas((ctx) => {
// draw here
});
return <canvas ref={canvasRef} />
}
useSize
Get element size and position info. (polyfill has included).
const size = useSize(elementRef);
| name | description |
| ---------- | ------------------------------------------------------------ |
| elementRef | should be an object returned by React.useRef
, also , elementRef.current
should reference to a dom element. |
| size | an object containing element size and position info: { x, y, width, height, top, right, bottom, left }
, all these properties will 0 when first render. |
example
import { useRef } from 'react';
import { useSize } from 'messy-hooks';
function Cmp() {
const ref = useRef();
const size = useSize(ref);
console.log(size); // will logg twice: first is all zero and second has actual value
return <div ref={ref}> Hi </div>
}
useLaterEffect
Difference between useEffect
is this hook not run after first render
const size = useLaterEffect(() => {
// your code
}, [dep]);