An open API service indexing awesome lists of open source software.

https://github.com/addono/react-persisted-global-state

Simple React hook for global, local storage persisted state
https://github.com/addono/react-persisted-global-state

github-actions global hooks local-storage npm persist react state

Last synced: about 2 months ago
JSON representation

Simple React hook for global, local storage persisted state

Awesome Lists containing this project

README

        

# react-persisted-global-state

[![License](https://img.shields.io/github/license/Addono/react-persisted-global-state?style=flat-square)](https://github.com/Addono/react-persisted-global-state/blob/master/LICENSE)
[![Project Status: Active – The project has reached a stable, usable state and is being actively developed.](https://img.shields.io/badge/project%20status-Active-greengrass?style=flat-square)](https://www.repostatus.org/#active)
[![Depfu](https://img.shields.io/depfu/Addono/react-persisted-global-state?style=flat-square)](https://depfu.com/github/Addono/react-persisted-global-state)
[![npm](https://img.shields.io/npm/dt/react-persisted-global-state?style=flat-square)](https://www.npmjs.com/package/react-persisted-global-state)
[![npm](https://img.shields.io/npm/v/react-persisted-global-state?style=flat-square)](https://www.npmjs.com/package/react-persisted-global-state)
[![GitHub stars](https://img.shields.io/github/stars/Addono/react-persisted-global-state?style=flat-square)](https://github.com/Addono/react-persisted-global-state/stargazers)
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

## About

Simple React hook for global state which is persisted to Local Storage.

This allows sharing state between multiple components or different instance of the same component, all while the changes are persisted to the browser's Local Storage.

## Installing

Install `react-persisted-global-state` and its peer-dependencies:

```bash
# For users of npm
npm install --save react-persisted-global-state react-use

# For users of Yarn
yarn add react-persisted-global-state react-use
```

## Usage

```tsx
import { createPersistedGlobalState } from 'react-persisted-global-state';

// Register a re-usable instance of our global state store
const useMyPersistedGlobalState = createPersistedGlobalState(
'my-localstorage-key',
'Hello, world!'
);

const MyComponent = () => {
const [state, setState, removeState] = useMyPersistedGlobalState();

return (
setState(e.target.value)} onClear />
);
};
```

## Releasing

We use [`release-it`](https://github.com/release-it/release-it) to automate our creating releases for this application. A new release can be rolled out by running:

```bash
yarn release
```

## ✨ Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):



Adriaan Knapen

💻 🔧 📖 ⚠️

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!