/use-hash-param

React hook for handling parameters in URL fragment

Primary LanguageTypeScript

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