https://github.com/jackall3n/next-query

A Next.js hook designed to parse and return query-string params on every render, even on load
https://github.com/jackall3n/next-query

Last synced: 4 days ago
JSON representation

A Next.js hook designed to parse and return query-string params on every render, even on load

• Host: GitHub
• URL: https://github.com/jackall3n/next-query
• Owner: jackall3n
• Created: 2022-05-15T19:32:08.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T14:56:09.000Z (about 1 year ago)
• Last Synced: 2024-11-09T08:42:31.723Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://npmjs.com/package/next-query
• Size: 11.7 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# next-query 🔎











## Blurb

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

## Installation

```shell

npm install next-query

```

```shell

yarn add next-query

```

## Usage

### Basic

```typescript

import useQuery from 'next-query';

function Page() {

  // Returns => { id: string | string[] };

  const { id } = useQuery();

  

  ...

}

```

### Typed

```typescript

import useQuery from 'next-query';

function Page() {

  // Return Type => { id: string };

  const { id } = useQuery<{ id: string }>();

  

  ...

}

```

### Parsed

```typescript

import useQuery from 'next-query';

function Page() {

  // Return Type => { id: number };

  const { id } = useQuery({ id: Number });

  

  ...

}

```

See Supported Parse Types for more

### Arrays

```typescript

import useQuery from 'next-query';

function Page() {

  // Return Type => { ids: number[] };

  const { ids } = useQuery({ ids: [Number] });

  

  ...

}

```

### Complex

```typescript

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

```typescript

String | Boolean | Number

```