@bytesoftio/use-query

Installation

yarn add @bytesoftio/use-query or npm install @bytesoftio/use-query

Table of contents

• Description
• Usage
  • useQuery

Description

This package provides a convenient way working with url query segments, when using react-router. You don't have to build a valid querystring anymore, whenever you want to update a query param, for example during sorting, filtering, pagination and other deep linking related stuff.

Usage

useQuery

Hook into any query param you want, right inside your React component. Updating a query param in the url is as easy as a regular setState. Defining default values for each query param saves you some boilerplate code.

import React from "react"
import { useQuery } from "@bytesoftio/use-query"

const Component = () => {
  // hook into multiple query params and provide default values 
  const [query, setQuery] = useQuery({ page: 1, order: "asc" })
  
  const goToPage3 = () => setQuery({ page: 3 })
  const toggleSorting = () => setQuery({ order: query.order === "asc" ? "desc" : "asc" })
  
  return (
    <div>
      <button onClick={toggleSorting}>Change sorting order</button> 
      <button onClick={goToPage3}>Go to 3rd page</button>
    </div>
  )
}