README
REACT QEUERY STATE SYNC
This package provide hook for manage your variables needed store in state and synced with query params.
This package has dependencie to react-router-dom
.
Instalation
npm i react-query-state-sync
How to use
Create some page, wrap it with Router
.
import { useQueryStateSync } from "react-query-state-sync";
const TestPage = () => {
const { queryParams, querySetters } = useQueryStateSync({
page: "1",
limit: "10",
});
return (
<div>
<div>Page: {queryParams.page}</div>
<div>
<button
onClick={() =>
querySetters.set_page(String(Number(queryParams.page) + 1))
}
>
Next page
</button>
<button
onClick={() =>
querySetters.set_page(String(Number(queryParams.page) - 1))
}
>
Prew page
</button>
</div>
<div>
Limit:{" "}
<select onChange={(e) => querySetters.set_limit(e.target.value)}>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>
</div>
);
};
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import TestPage from "./TestPage";
function App() {
return (
<Router>
<Switch>
<Route path="/">
<TestPage />
</Route>
</Switch>
</Router>
);
}
How it work
All you need is useQueryStateSync
. This hook API designed with useState
in mind.
const { queryParams, querySetters } = useQueryStateSync({
page: "1",
limit: "10",
});
Object you pass to useQueryStateSync
as param, is object where you define inital state.
So, queryParams
is object returned same object as you pass to useQueryStateSync
, but with actual values.
querySetters
is object with setters. All setters creates by add set_
to parametr name. If you define page then you get set_page
function for update page
value.