import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import useQueryParams from '@scaleway/use-query-params'

const App = () => {
  const { queryParams, setQueryParams } = useQueryParams()
  const { user } = queryParams
  const setUser = () => setQueryParams({ user: 'John' })
  // ?user=John

  return (
    <>
      <h1>User: {user}</h1>
      <button onClick={setUser}>Set User John</button>
    </>
  )
}

render(
  <Router>
    <App />
  </Router>,
  document.getElementById('react-root'),
)

// 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'

const Component = () => {
  const { queryParams, setQueryParams } = useQueryParams()
  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>Company: {company}</h1>
      <button onClick={setUser}>Set User John</button>
    </>
  )
}

// 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'

const Component = () => {
  const { queryParams, replaceQueryParams } = useQueryParams()
  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>Company: {company}</h1>
      <button onClick={setUser}>Set User John</button>
    </>
  )
}

// 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'

const Component = () => {
  const { queryParams, replaceQueryParams } = useQueryParams()
  const { user, company } = queryParams // user will be undefined and company will be "Scaleway"
  const setUser = () => replaceQueryParams({ user: 'John' }, { push: true }) // user will be "John" and company will be undefined
  // ?user=John

  return (
    <>
      <h1>User: {user}</h1>
      <h1>Company: {company}</h1>
      <button onClick={setUser}>Set User John</button>
    </>
  )
}