# react-state-url-fragment

> [![NPM badge](https://img.shields.io/npm/v/react-state-url-fragment)](https://www.npmjs.com/package/react-state-url-fragment) [![Dependabot badge](https://badgen.net/github/dependabot/iamogbz/react-state-url-fragment/?icon=dependabot)](https://app.dependa

Latest version **2.0.0** (published 2023-08-23) · Unlicense license · 0 weekly downloads

## Install

```sh
npm install react-state-url-fragment
pnpm add react-state-url-fragment
yarn add react-state-url-fragment
bun add react-state-url-fragment
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-08-23 |
| First published | 2023-01-12 |
| Weekly downloads | 0 |
| License | Unlicense |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | iamogbz |

## Links

- npm: https://www.npmjs.com/package/react-state-url-fragment
- npm.io page: https://npm.io/package/react-state-url-fragment

## Recent versions

- 2.0.0 (latest) — 2023-08-23
- 1.0.0 — 2023-01-12

## README

# React State Url Fragment

[![NPM badge](https://img.shields.io/npm/v/react-state-url-fragment)](https://www.npmjs.com/package/react-state-url-fragment)
[![Dependabot badge](https://badgen.net/github/dependabot/iamogbz/react-state-url-fragment/?icon=dependabot)](https://app.dependabot.com)
[![Dependencies](https://img.shields.io/librariesio/github/iamogbz/react-state-url-fragment)](https://libraries.io/github/iamogbz/react-state-url-fragment)
[![Build Status](https://github.com/iamogbz/react-state-url-fragment/workflows/Build/badge.svg)](https://github.com/iamogbz/react-state-url-fragment/actions)
[![Coverage Status](https://coveralls.io/repos/github/iamogbz/react-state-url-fragment/badge.svg?branch=refs/heads/main)](https://coveralls.io/github/iamogbz/react-state-url-fragment)

Sets react state to url fragment

## `useUrlState`

```ts
import { useCallback } from "react";
import { useUrlState } from "react-state-url-fragment";

export function usePageState<T>(defaultState?: T) {
  const getEncodedState = useCallback(() => location.hash.substring(1), []);
  const onEncodedState = useCallback((hash) => (location.hash = hash), []);
  const handleDecodeError = defaultState && (() => defaultState);

  return useUrlState<T>({
    getEncodedState,
    handleDecodeError,
    onEncodedState,
  });
}
```

### Example

<https://github.com/iamogbz/react-state-url-fragment/blob/93b12c825e0ea4975f6b05544a56b7af5826984e/demo/src/components/hooks/usePageState.ts#L1-L22>

### [Demo][homepage]

```sh
$ cd demo/
$ make start

Starting the development server...
```

Check it out [here][homepage]

<!-- links -->
[homepage]: https://ogbizi.com/react-state-url-fragment

---
_Source: https://npm.io/package/react-state-url-fragment · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._