next-query 🔎

Blurb

A hook for Next.js which can parse and return a query-string object, even on load.

Installation

npm install next-query

yarn add next-query

Usage

Basic

import useQuery from 'next-query';

function Page() {
  // Returns => { id: string | string[] };
  const { id } = useQuery();
  
  ...
}

Typed

import useQuery from 'next-query';

function Page() {
  // Return Type => { id: string };
  const { id } = useQuery<{ id: string }>();
  
  ...
}

Parsed

import useQuery from 'next-query';

function Page() {
  // Return Type => { id: number };
  const { id } = useQuery({ id: Number });
  
  ...
}

See Supported Parse Types for more

Arrays

import useQuery from 'next-query';

function Page() {
  // Return Type => { ids: number[] };
  const { ids } = useQuery({ ids: [Number] });
  
  ...
}

Complex

import useQuery from 'next-query';

function Page() {
  // Return Type => { id: number, selected: boolean };
  const { ids, selected } = useQuery({ id: Number, selected: Boolean }); 
  
  ...
}

API

Supported Parse Types

String | Boolean | Number