Package Exports

@cdxoo/react-router-url-search-params
@cdxoo/react-router-url-search-params/cjs/index.js
@cdxoo/react-router-url-search-params/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@cdxoo/react-router-url-search-params) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@cdxoo/react-router-url-search-params

Hook to access and update url search params in conjunction with react-router. Uses URLSearchParams under the hood.

Requires 'react-router' 5.x and 'react' >= 16.8 as peer dependencies.

Installation

npm install --save @cdxoo/react-router-url-search-params

Usage

import React from 'react';
import { useURLSearchParams } from '@cdxoo/react-router-url-search-params';

// in this component updateQuery pushes the history with
// the updated search params when button is clicked
const MyComponent = () => {
    let [ query, updateQuery ] = useURLSearchParams({ defaults: {
        foo: 'bar',
    }});

    let handleClick = () => {
        updateQuery({ foo: 'baz', other: 'some-value' });
    }

    return (
        <div>
            <button onClick={ handleClick }>click</button>
            <div>{ query.foo }</div>
            <div>{ query.other }</div>
        </div>
    );
}

// you can disable the automatic history push in updateQuery
// in case you want to use the updated search query string elsewhere
// e.g. in <a href='...'>
const MyOtherComponent = () => {
    let [ query, updateQuery ] = useURLSearchParams({ defaults: {
        foo: 'bar',
    }});

    let nextSearchQuery = updateQuery({ other: 'next' }, { push: false })
    return (
        <div>
            <div>{ query.foo }</div>
            <div>{ query.other }</div>
            <a href={ `/my-url/${nextSearchQuery}`}>
        </div>
    )
}