use-hash-param

React hook for handling parameters in URL fragment

Usage no npm install needed!

<script type="module">
  import useHashParam from 'https://cdn.skypack.dev/use-hash-param';
</script>

README

useHashParam

Package version on NPM Build status Bundle size

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