open-index/open-npm huggingface dataset:
npm package: @imjakechapman/use-nested-match
Description: Currently with React Router V6 (still in alpha), using `activeClassName` on a top level `<NavLink>` on works with exact match. This hook helps mitigate the issue until they rework the internal `useMatch` to work correctly against nested routes.
Author: Jake Chapman
Latest version: 0.1.0

# useNestedMatch

Currently with React Router V6 (still in alpha), using `activeClassName` on a top level `<NavLink>` on works with exact match.
This hook helps mitigate the issue until they rework the internal `useMatch` to work correctly against nested routes.

Example: https://codesandbox.io/s/react-router-v6-utility-function-usenestedmatch-44q73

#### How it works

`useNestedMatch(test: string, opts: { type: string; path: string })`

There are 2 `type` options available

1. "startsWith"
2. "endsWith"

They do exactly what they sound like they do. `startsWith` checks if the path starts with the test string and `endsWith` checks if the path name ends with the test string. If you don't pass a type param it will match against the entire path.

provide a path to check against, default is `''`. For now I just pass `pathname` you can retrieve from react-router-dom's `useLocation` hook.

#### Usage

```
npm install @imjakechapman/use-nested-match
```

or

```
yarn add @imjakechapman/use-nested-match
```

then

##### Examples

We have some some nested routers and a top level `NavLink` we want to stay active. import `useNestedMatch` and test against whatever your heart desires.

location.pathname `'/account/921808/somenestedroute/edit'`

```
import { useLocation } from 'react-router-dom'
import { useNestedMatch } from '@imjakechapman/use-nested-match'

const App = () => {
  const { pathname } = useLocation()

  // returns true
  const accountLinkActive = useNestedMatch('account', {
    type: 'startsWith',
    path: pathname
  })

  // returns false
  const settingsLinkActive = useNestedMatch('settings') // false

  // returns true
  const editLinkActive = useNestedMatch('edit', {
    type: 'endsWith',
    path: pathname
  })

  return (
    <NavLink className={
      classnames({ 'my-active-class': accountLinkActive })
    }>
      Account
    </NavLink>

    <NavLink className={
      classnames({ 'my-active-class': settingsLinkActive })
    }>
      Settings
    </NavLink>

    <NavLink className={
      classnames({ 'my-active-class': editLinkActive })
    }>
      Edit
    </NavLink>
  )
}
```
npm package: @imjakechapman/use-query-params
Description: React hook to easily read and manipulate query params
Author: @imjakechapman
Latest version: 1.0.1

# use-query-params

> React hook to easily read and manipulate query params

## Install

```bash
yarn add @imjakechapman/use-query-params
```

```bash
npm install @imjakechapman/use-query-params
```

## Usage (TypeScript)

```tsx
import React, { useState } from 'react';
import { useQueryParams } from 'use-query-params';

// Types of all your query parameters
type QueryParams = {
  search?: string;
  options?: string[];
  map?: {
    [key: string]: any;
  },
};

// Your default parameters
const defaultParams: QueryParams = {
  search: 'immadefaultparam',
  options: ['well', 'so', 'am', 'i', '!'],
  map: {
    dont: [
      "forget",
      "about",
      "me",
    ],
  },
};

const App: React.FC = () => {
  const { queryParams, updateQueryParams } = useQueryParams<QueryParams>(defaultParams);

  function updateSomeParam() {
    updateQueryParams({
      ...queryParams,
      search: "immaNewValue",
    });
  }

  return (
    <h1>Enjoy your params</h1>
    <pre>
      {JSON.stringify(queryParams, null, 2)}
    </pre>
  )
}

export default App;
```

## License

MIT © [imjakechapman](https://github.com/imjakechapman)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).