diff --git a/packages/use-query-params/README.md b/packages/use-query-params/README.md
index 945091fd8..070187f45 100644
--- a/packages/use-query-params/README.md
+++ b/packages/use-query-params/README.md
@@ -5,17 +5,17 @@
## Install
```bash
-$ yarn add @scaleway/use-query-params
+$ yarn add @scaleway/use-query-params react-router-dom
```
## Usage
-
```js
import React from 'react'
+import { render } from 'react-dom'
+import { BrowserRouter as Router } from "react-router-dom";
import useQueryParams from '@scaleway/use-query-params'
-// this component should be wrap with a Router
-const Component = () => {
+const App = () => {
const { queryParams, setQueryParams } = useQueryParams()
const { user } = queryParams
const setUser = () => setQueryParams({ user: 'John' })
@@ -28,6 +28,13 @@ const Component = () => {
>
)
}
+
+render(
+
+
+ ,
+ document.getElementById('react-root'),
+)
```
### Set query params
@@ -35,21 +42,20 @@ const Component = () => {
Merge current query params with the new ones passed in parameters.
```js
-//In this exemple we admit that we have an URL that include : `?compagny=Scaleway".
+// In this exemple we assume that we have an URL that include : `?company=Scaleway".
import React from 'react'
import useQueryParams from '@scaleway/use-query-params'
-// this component should be wrap with a Router
const Component = () => {
const { queryParams, setQueryParams } = useQueryParams()
- const { user, compagny } = queryParams // user will be undefined and compagny will be "Scaleway"
- const setUser = () => setQueryParams({ user: 'John' }) // user will be "John" and compagny will be "Scaleway"
- // ?compagny=Scaleway&user=John
+ const { user, company } = queryParams // user will be undefined and company will be "Scaleway"
+ const setUser = () => setQueryParams({ user: 'John' }) // user will be "John" and company will be "Scaleway"
+ // ?company=Scaleway&user=John
return (
<>
User: {user}
-
Compagny: {compagny}
+
Company: {company}
>
)
@@ -61,21 +67,20 @@ const Component = () => {
Erase current query params and replace by the new ones passed in parameters.
```js
-//In this exemple we admit that we have an URL that include : `?compagny=Scaleway".
+// In this exemple we assume that we have an URL that include : `?company=Scaleway".
import React from 'react'
import useQueryParams from '@scaleway/use-query-params'
-// this component should be wrap with a Router
const Component = () => {
const { queryParams, setQueryParams } = useQueryParams()
- const { user, compagny } = queryParams // user will be undefined and compagny will be "Scaleway"
- const setUser = () => replaceQueryParams({ user: 'John' }) // user will be "John" and compagny will be undefined
+ const { user, company } = queryParams // user will be undefined and company will be "Scaleway"
+ const setUser = () => replaceQueryParams({ user: 'John' }) // user will be "John" and company will be undefined
// ?user=John
return (
<>