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 ( <>

User: {user}

-

Compagny: {compagny}

+

Company: {company}

)