use-url-search-state

use-url-search-state is a dependency-free React Hook library that allows you to save and sync application state using the URL's search parameters

Installation

npm install --save use-url-search-state

How to Use

import React from 'react';
import { useURLSearchState } from 'use-url-search-state';

function Page() {
    //                                          default value, will change url seacrh to "?type=first"
    const [state, setState] = useURLSearchState({ type: 'first' });

    return (
      <div>
        <h3>{state.type}</h3>
        <button
            onClick={() => setState({ type: 'first' })}
        >first</button>
        <button
            onClick={() => setState({ type: 'second' })}
        >second</button>
      </div>
    );
  }
}

import React from 'react';
import { useURLSearchState } from 'react-url-search';

function Page() {
    const [state, setState] = useURLSearchState(
        {
            count: 0
        },
        {
            // ensure the type of count is Number
            count: { type: Number }
        }
    );

    return (
      <div>
        <h3>{state.count}</h3>
        <button
            onClick={() => setState({ count: state.count + 1 })}
        >add</button>
        <button
            onClick={() => setState({ count: state.count - 1 })}
        >minues</button>
      </div>
    );
  }
}