Skip to content

Commit 09193f3

Browse files
author
Vincent Comby
committed
Fix typos
1 parent ce075a9 commit 09193f3

File tree

2 files changed

+19
-13
lines changed

2 files changed

+19
-13
lines changed

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ React hooks to manage your application state using the URL query string ([search
66

77
use-query-params-state aims to improve the end user experience by providing a solution helping developers creating more shareable React web application. It is doing so by making URL state management easy, reliable and type safe and therefore encouraging developers to use the URL query string more often.
88

9-
Note: Not all the states of your application can/should be stored in the URL. use-query-params-state is typically suited to manage states corresponding to parameters manipulated by the user that influences the current page.
9+
**Note:** Not all the states of your application can/should be stored in the URL. use-query-params-state is typically suited to manage states corresponding to parameters manipulated by the user that influence the current page.
1010

1111
Example of URL state using use-query-params-state:
1212
```js
@@ -174,7 +174,7 @@ Note: When updating the query params state, the change is automatically reflecte
174174

175175
### Usage of useQueryParamsState across multiple components
176176

177-
If you want to call useQueryParamsState in multiple components and want to avoid having to specify the schema each time,
177+
If you want to call useQueryParamsState in multiple components and want to avoid having to pass the schema each time,
178178
you can use the [createUseQueryParamsStateHook](doc/API_REFERENCE.md#createUseQueryParamsStateHook) factory.
179179

180180
```js

doc/API_REFERENCE.md

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Each factory follow the same function signature:
1818
*Note: `T` represent the actual type of the value (number | string | boolean | string[] | number[]), depending on the factory function used.*
1919
2020
### Arguments
21-
- **defaultValue? (T | DefaultValueFunction<T> | null | undefined)**: Serve as a substitute to the param value when the param is not present in the query string. When defaultValue is a function, the provided function will be executed each time we need to read the state and its return value will be used as a default value
21+
- **defaultValue? (T | DefaultValueFunction<T> | null | undefined)**: Serve as a substitute to the param value when the param is not present in the query string. When defaultValue is a function, the provided function will be executed each time we need to read the state and its return value will be used as a default value.
2222
2323
### Returns
2424
- **(QueryParamDef<T>)**: A QueryParamDef instance is defining what type the associated parameter should be. This is necessary to automatically stringify/parse the parameter to/from the URL and perform some type checking (Typescript + Javascript) when getting/setting the param . `QueryParamDef<T>` will only accept the value to be set to `T | null | undefined`.
@@ -72,16 +72,16 @@ Hook to manipulate your query params state.
7272
#### QueryParams
7373
Object following the shape defined in your schema representing the current state. The key is the name of your parameter and the value is the current value of the parameter. When one parameter does not currently exist in the query string, its value will be `undefined` or the default value you potentially provided when creating the schema.
7474
75-
### QueryParamsSetter
75+
#### QueryParamsSetter
7676
Function to call when updating the state of your query parameters. Calling that function will update the current URL query string and will automatically re-render your components with the new query params state.
7777
7878
The function has the following signature:
7979
8080
#### Arguments
8181
- **newQueryParams (Partial<QueryParams>)**: Object with the query params key/value you want to update.
82-
- **isPartialUpdate? (boolean)**: Define if the update should be applied on top of the current query params state or not. Default to true
83-
- If true, the new query params will be applied on top of the current query params state (i.e: `const newState = { ...oldState, ...newQueryParams }`.
84-
- If false, the new query params will be applied on top of an empty object, (i.e: `const newState = { ...newQueryParams }`). This can also be used to reset the state.
82+
- **isPartialUpdate? (boolean)**: Define if the update should be applied on top of the current query params state or not. Default to `true`.
83+
- If `true`, the new query params will be applied on top of the current query params state (i.e: `const newState = { ...oldState, ...newQueryParams }`.
84+
- If `false`, the new query params will be applied on top of an empty object, (i.e: `const newState = { ...newQueryParams }`). This can also be used to reset the state.
8585
8686
8787
### Example
@@ -115,7 +115,7 @@ function MyComponent() {
115115
}
116116
```
117117
118-
If you need to dynamically change your config base on your component props, you can also do it.
118+
*Note: If you need to dynamically change your config base on your component props, you can also do it.*
119119
120120
```js
121121
function MyComponent(props) {
@@ -135,7 +135,7 @@ Sometimes it's just easier to treat each query param as an independent state, yo
135135
- **contextData?** (any): The context data
136136
137137
### Returns
138-
- **([T | null | undefined, (value?: T | null | undefined) => void)**: Tuple where the first index is the value of the query param and the second one is the function to set a new value to the parameter.
138+
- **(T | null | undefined, (value?: T | null | undefined) => void)**: Tuple where the first index is the value of the query param and the second one is the function to set a new value to the parameter.
139139
140140
### Example
141141
```js
@@ -180,6 +180,10 @@ const queryParamsSchema = {
180180
...
181181
}
182182
const useProductSearchFilters = createUseQueryParamsStateHook(queryParamsSchema)
183+
184+
function MyComponent() {
185+
const [productFilters, setProductFilters] = useProductSearchFilters()
186+
}
183187
```
184188
185189
The snippet above is basically equivalent to:
@@ -194,13 +198,15 @@ const queryParamsSchema = {
194198
const useProductSearchFilters = () => {
195199
return useQueryParamsState(queryParamsSchema)
196200
}
197-
```
198-
199201

202+
function MyComponent() {
203+
const [productFilters, setProductFilters] = useProductSearchFilters()
204+
}
205+
```
200206
201207
## buildQueryString
202208
203-
Create a new query string based on the provided schema and a matching query params state object.
209+
Helper function to create a new query string based on the provided schema and a matching query params state object.
204210
An error will be thrown if the param does not match the type defined in the schema.
205211
206212
### Arguments
@@ -293,7 +299,7 @@ const buildQueryStringFromURL = useBuildQueryStringFromCurrentURL(queryParamsSta
293299
/** Using QS_BUILD_STRATEGY.PRESERVE_ALL by default */
294300
const queryStringPreserveAll = buildQueryStringFromURL(
295301
{ stringParam: "hello world" }
296-
) // => "booleanParam=true&stringParam=hello+world&&utm_source=facebook"
302+
) // => "booleanParam=true&stringParam=hello+world&utm_source=facebook"
297303

298304
const queryStringPreserveExternalOnly = buildQueryStringFromURL(
299305
{ stringParam: "hello world" },

0 commit comments

Comments
 (0)