useHashParam

React hook that allows to keep your state in sync with URL parameters.

Installation

npm install --save use-hash-param

Usage

import React from "react";
import useHashParam from "use-hash-param";

function ControlledInput() {
  const [name, setName] = useHashParam("name");

  return <input value={name || ""} onChange={(e) => setName(e.target.value)} />;
}

Anything you type into the input will be reflected in the address bar (e.g. http://localhost:3000/#?name=Peter). And if you open a link with such a parameter, the field will be populated automatically!

Example

• https://codesandbox.io/s/usehashparam-011-example-h8mol