docs(use-query-params): improve README (#156)

Author: chambo-e

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,28 +28,34 @@ const Component = () => {
     </>
   )
 }
+
+render(
+  <Router>
+    <App />
+  </Router>,
+  document.getElementById('react-root'),
+)
 ```
 
 ### Set query params
 
 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>
     </>
   )