@trz/hooks
A magical utils
😂
Usage
import { useHistory } from 'react-router';
import { useQueries } from "@trz/hooks";
/* -------------------------------------------------------------------------- */
// App.tsx
function TestComponent(): ReactElement {
const [ queries, setQueries ] = useQueries({ pageSize: 10, pageNo: 1 });
const _clickHandler = useCallback(() => {
setQueries((queries) => {
return { ...queries, pageNo: 2};
});
//Redirect => /index?pageNo=2&pageSize=10
}, [])
useLayoutEffect(() => {
console.log(queries.pageSize, queries.pageNo);
//print => 10 1
}, [ queries ]);
return (
<Some.Component>
<Link to={`/index?pageNo=${queries.pageNo - 1}&pageSize=${queries.pageSize}`}>Prev</Link>
<Link to={`/index?pageNo=${queries.pageNo + 1}&pageSize=${queries.pageSize}`}>Next</Link>
<Button
onClick={() => {
setQueries({ pageNo: 2 });
//Redirect => /index?pageNo=2
}}>
Click me
</Button>
<Button
onClick={_clickHandler}>
Click me
</Button>
</<Some.Component>>
);
}