https://github.com/rookie-luochao/react-router-toolkit

some tool functions and hooks to react-router
https://github.com/rookie-luochao/react-router-toolkit

query react-router-v6 search

Last synced: 2 months ago
JSON representation

some tool functions and hooks to react-router

• Host: GitHub
• URL: https://github.com/rookie-luochao/react-router-toolkit
• Owner: rookie-luochao
• Created: 2023-11-16T05:09:26.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-02-06T07:52:36.000Z (over 1 year ago)
• Last Synced: 2025-01-27T10:43:33.029Z (4 months ago)
• Topics: query, react-router-v6, search
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-router-toolkit
• Size: 19.5 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
### API

##### parseQueryString: queryString to queryMap

```js

const queryString = 'name=zhangshan&age=18&height=180'

const queryString2 = '?name=zhangshan&age=18&height=180'

const queryMap = parseQueryString(queryString)

const queryMap2 = parseQueryString(queryString2)

```

##### toQueryString: queryMap to queryString

```js

const queryMap = {

  name: 'zhangshan',

  age: 18,

  height: 180,

}

const queryString = toQueryString(queryMap)

```

##### useRouterQuery: quick get query and set query

```js

interface IQueryMap {

  name: string;

  age: string;

  height: string;

  loves: ParsedUrlQuery;

}

const [routerRuery, setRouterQuery] = useRouterQuery();

const name = routerRuery.name;

const loves = routerRuery.loves;

// or

const [{ name, loves }, setRouterQuery] = useRouterQuery();

setRouterQuery((preState) => ({

  ...preState,

  name: "lisi",

}));

```

### common interface

##### Dictionary

```js

interface Dictionary {

  [key: string]: T;

}

```

##### ParsedUrlQueryValue

```js

type ParsedUrlQueryValue = string | string[];

```

##### ParsedUrlQuery

```js

interface ParsedUrlQuery {

  [key: string]: ParsedUrlQueryValue;

}

```