- )
-}
+ );
+};
```
## 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 (
- )
-}
+ );
+};
```
### `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