# useHash
Package: @mantine/hooks
Import: import { UseHash } from '@mantine/hooks';

## Usage

The `use-hash` hook returns the hash from the URL, subscribes to its changes with the [hashchange event](https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event),
and allows you to change it with the `setHash` function:

```tsx
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.

```tsx
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

```tsx
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:

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