diff --git a/README.md b/README.md index 08024d4..b96dbbb 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,9 @@ > Use React Router **route** and **query string** as component **state** +> [!WARNING] +> **Deprecation Warning**: This package does not support react-router v6 (see issue [#172](https://github.com/baruchiro/use-route-as-state/issues/172)). + [![npm](https://img.shields.io/npm/v/use-route-as-state?logo=npm&label=version)](https://www.npmjs.com/package/use-route-as-state) [![npm](https://img.shields.io/npm/dw/use-route-as-state?label=npm)](https://www.npmjs.com/package/use-route-as-state) [![Release](https://github.com/baruchiro/use-route-as-state/workflows/Release/badge.svg)](https://github.com/baruchiro/use-route-as-state/actions?query=workflow%3ARelease) @@ -19,25 +22,27 @@ You can see a live demo, including code, [here](https://baruchiro.github.io/use- ```tsx // URL: /:param?query= -import * as React from 'react' +import * as React from "react"; -import { useRouteParams, useQueryString } from 'use-route-as-state' +import { useRouteParams, useQueryString } from "use-route-as-state"; const Example = () => { - const [{ param }, setRouteParams] = useRouteParams() - const [{ query }, setQueryParams] = useQueryString() + const [{ param }, setRouteParams] = useRouteParams(); + const [{ query }, setQueryParams] = useQueryString(); return (
setRouteParams({ param: target.value })} /> + value={param} + onChange={({ target }) => setRouteParams({ param: target.value })} + /> setQueryString({ query: target.value })} /> + value={query} + onChange={({ target }) => setQueryString({ query: target.value })} + />
- ) -} + ); +}; ``` ## API @@ -45,8 +50,8 @@ const Example = () => { This library is trying to behave like the `useState` React hook, by exposing a similar interface. ```typescript -type DispatchState = Dispatch> -type RouteObject = Record +type DispatchState = Dispatch>; +type RouteObject = Record; ``` ### `useRouteParams` @@ -57,15 +62,15 @@ type RouteObject = Record This custom hook returns an array with two elements: -- The **first element** is a *string to string* object, when the `key` is the *route param* name, and the `value` is the value of this param. +- The **first element** is a _string to string_ object, when the `key` is the _route param_ name, and the `value` is the value of this param. -- The **second element** is a *function* to update the *route* with new *string to string* object. Like in `useState`, you can set a new object, or set a function to transaform the `prev` state to a new one. +- The **second element** is a _function_ to update the _route_ with new _string to string_ object. Like in `useState`, you can set a new object, or set a function to transaform the `prev` state to a new one. > Updating the `route` will [**`push`**](https://reactrouter.com/web/api/history) the updated route to the `history`. -The *params object* will be reactive to the *route*. It means the any time the *route* changed, the *params object* (the **first element** from `useParamsAsState`) will change according to the *route* and will render the component. +The _params object_ will be reactive to the _route_. It means the any time the _route_ changed, the _params object_ (the **first element** from `useParamsAsState`) will change according to the _route_ and will render the component. -The *update function* (the **second element** from `useParamsAsState`) will change the *route*, and it will cause an update in the *params object*, respectively. +The _update function_ (the **second element** from `useParamsAsState`) will change the _route_, and it will cause an update in the _params object_, respectively. #### Note @@ -77,7 +82,7 @@ To use `Route Params`, you have to declare the params with the [React Router API **Use to sync the [Query Parameters](https://reactrouter.com/web/example/query-parameters) with you component.** -This hook works just like `useParamsAsState`, except you don't need to declare any special *route* in the React Router. You can use this hook in any component, down in the tree, as long as there is a *Router* somewhere up in the tree. +This hook works just like `useParamsAsState`, except you don't need to declare any special _route_ in the React Router. You can use this hook in any component, down in the tree, as long as there is a _Router_ somewhere up in the tree. > Updating the `route` will [**`replace`**](https://reactrouter.com/web/api/history) the updated route to the `history`. @@ -91,36 +96,34 @@ Example: ```tsx // URL: /?foo=bar -import * as React from 'react' -import { useQueryStringKey } from 'use-route-as-state' +import * as React from "react"; +import { useQueryStringKey } from "use-route-as-state"; const Example = () => { - const [foo, setFoo] = useQueryStringKey('foo') + const [foo, setFoo] = useQueryStringKey("foo"); return (
- setFoo(target.value)} /> + setFoo(target.value)} />
- ) -} + ); +}; ``` ### `useUrlState` ```typescript type UrlState = { - params: RouteObject, - query: RouteObject -} + params: RouteObject; + query: RouteObject; +}; ``` > **Type:** `useUrlState: (defaultValues?: UrlState): [UrlState, DispatchState]` -Due to limitations in *React Router*, and *React* itself, you can't use different hooks here together during one render cycle. +Due to limitations in _React Router_, and _React_ itself, you can't use different hooks here together during one render cycle. -In order to solve that, you can use this hook to control both *route params* and *query string* at once. +In order to solve that, you can use this hook to control both _route params_ and _query string_ at once. ## Development