From 0071242107240e8de302de9420178574850486bc Mon Sep 17 00:00:00 2001
From: Manu Chambon <manu@ehma.nu>
Date: Thu, 6 May 2021 17:55:17 +0200
Subject: [PATCH] docs(use-query-params): improve README

---
 packages/use-query-params/README.md | 35 ++++++++++++++++-------------
 1 file changed, 20 insertions(+), 15 deletions(-)

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(
+  <Router>
+    <App />
+  </Router>,
+  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 (
     <>
       <h1>User: {user}</h1>
-      <h1>Compagny: {compagny}</h1>
+      <h1>Company: {company}</h1>
       <button onClick={setUser}>Set User John</button>
     </>
   )
@@ -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 (
     <>
       <h1>User: {user}</h1>
-      <h1>Compagny: {compagny}</h1>
+      <h1>Company: {company}</h1>
       <button onClick={setUser}>Set User John</button>
     </>
   )