use-hash

Usage

The use-hash hook returns the hash from the URL, subscribes to its changes with the hashchange event, and allows you to change it with the setHash function:

import { useHash, randomId } from '@mantine/hooks';
import { Button, Text, Code } from '@mantine/core';

function Demo() {
  const [hash, setHash] = useHash();
  return (
    <>
      <Button onClick={() => setHash(randomId())}>Set hash to random string</Button>
      <Text>Current hash: <Code>{hash}</Code></Text>
    </>
  );
}

Initial state value

By default, use-hash will retrieve the value in useEffect. If you want to get the initial value as soon as the hook is called, set getInitialValueInEffect to false. Note that this option is not compatible with server-side rendering – you can only use it if your app is client-side only.

import { Button } from '@mantine/core';
import { useHash } from '@mantine/hooks';

function Demo() {
  const [hash, setHash] = useHash({ getInitialValueInEffect: false });
  return (
    <Button onClick={() => setHash('new-hash')}>Change hash</Button>
  );
}

Definition

interface UseHashOptions {
  getInitialValueInEffect?: boolean;
}

type UseHashReturnValue = [string, (value: string) => void];

function useHash(options?: UseHashOptions): UseHashReturnValue

Exported types

The UseHashOptions and UseHashReturnValue types are exported from @mantine/hooks; you can import them in your application:

import { UseHashOptions, UseHashReturnValue } from '@mantine/hooks';