https://github.com/iamogbz/react-state-url-fragment

🧩 Persists react state as a url fragment to enable navigation between application states
https://github.com/iamogbz/react-state-url-fragment

react state-management url url-hash

Last synced: 3 months ago
JSON representation

🧩 Persists react state as a url fragment to enable navigation between application states

• Host: GitHub
• URL: https://github.com/iamogbz/react-state-url-fragment
• Owner: iamogbz
• License: unlicense
• Created: 2022-11-08T01:00:14.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-30T10:31:48.000Z (about 1 year ago)
• Last Synced: 2024-05-02T01:37:21.435Z (about 1 year ago)
• Topics: react, state-management, url, url-hash
• Language: TypeScript
• Homepage: https://ogbizi.com/react-state-url-fragment/
• Size: 3.57 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

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(defaultState?: T) {

  const getEncodedState = useCallback(() => location.hash.substring(1), []);

  const onEncodedState = useCallback((hash) => (location.hash = hash), []);

  const handleDecodeError = defaultState && (() => defaultState);

  return useUrlState({

    getEncodedState,

    handleDecodeError,

    onEncodedState,

  });

}

```

### Example

* [Multiple encoded states concurrenly](https://github.com/iamogbz/react-state-url-fragment/blob/HEAD/demo/src/components/pages/Account.tsx#L11-L24)

* [Combine with other state management](https://github.com/iamogbz/react-state-url-fragment/blob/HEAD/demo/src/components/ping-pong/PingPong.tsx#L25-L29)

### [Demo][homepage]

```sh

$ cd demo/

$ make start

Starting the development server...

```

Check it out [here][homepage]

[homepage]: https://ogbizi.com/react-state-url-fragment