Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yamankatby/react-localstorage-helper
Cleaner LocalStorage usage by using hooks ⚓ and callback functions 🔉
https://github.com/yamankatby/react-localstorage-helper
callback-functions hooks localstorage react
Last synced: 4 months ago
JSON representation
Cleaner LocalStorage usage by using hooks ⚓ and callback functions 🔉
- Host: GitHub
- URL: https://github.com/yamankatby/react-localstorage-helper
- Owner: yamankatby
- Created: 2019-03-26T11:07:28.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-26T11:28:39.000Z (over 3 years ago)
- Last Synced: 2024-04-24T13:55:47.751Z (9 months ago)
- Topics: callback-functions, hooks, localstorage, react
- Language: TypeScript
- Homepage:
- Size: 1.46 MB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-localstorage-helper
[](https://www.npmjs.com/package/react-localstorage-helper)
[](https://www.npmjs.com/package/react-localstorage-helper)
[](https://github.com/yamankatby/react-localstorage-helper/issues)
[](https://github.com/yamankatby/react-localstorage-helper/issues)
## Installation
```bash
npm install react-localstorage-helper --save
```
**Or if you're using yarn:**
```
yarn add react-localstorage-helper
```
## Getting Started
Access localStorage easily inside your React component.
- Full support to use localStorage with new `React Hooks` ⚓.
- Listen to changes easily just by pass a `Callback function` 🔉.
- No need to worry about encoding data to `JSON` and decoding it back.
## Usage
### Function components (With Hooks) ⚓.
```jsx harmony
import { useLocalStorage } from "react-localstorage-helper";
const App = () => {
const [name, setName] = useLocalStorage("__name__", "Somebody");
const [isDark, setIsDark] = useLocalStorage("__isDark__", false);
return (
Hello! {name}
setName(e.currentTarget.value)} />
setIsDark(preValue => !preValue)}
/>
);
};
```
### Class components (With Callback Function) 🔉.
```jsx harmony
import { localStorage } from "react-localstorage-helper";
class App extends React.Component {
constructor(props) {
super(props);
this.state = { name: "Somebody", isDark: false };
this.updateName = localStorage("__name__", this.state.name, newName => {
this.setState(newName);
});
this.updateIsDark = localStorage(
"__isDark__",
this.state.isDark,
newIsDark => {
this.setState({ isDark: newIsDark });
}
);
}
render() {
return (
Hello! {this.state.name}
this.updateName(e.currentTarget.value)} />
this.updateIsDark(preValue => !preValue)}
/>
);
}
}
```
## Documentation
**Class component:**
```js
this.updateValue = localStorage(key, initialValue, onValueChange);
```
`localStorage` function returns a function to update the value in the localStorage and triggers `onValueChange` callback function.
**Function component:**
```js
const [value, setValue] = useLocalStorage(key, initialValue);
```
`useLocalStorage()` Hook returns a stateful value, and a function to update it.
During the initial render, the returned value (`value`) will be the same as the value passed as the secound argument (`initialState`) if there is no data stored in the localStorage.
### Lazy initial value
The `initialValue` argument is the value used during the initial render if there is no stored value in the localStorage. In subsequent renders, it is disregarded. If the initial value is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render:
**Class component:**
```js
this.updateValue = localStorage(
"__key__",
() => {
const initialValue = someExpensiveComputation(props);
return initialValue;
},
this.handleValueChange
);
```
**Function component:**
```js
const [value, setValue] = useLocalStorage("__key__", () => {
const initialValue = someExpensiveComputation(props);
return initialValue;
});
```
### Functional updates
If the new value is computed using the previous value, you can pass a function to `setValue`. The function will receive the previous value, and return an updated value. Here’s an example:
**Class component:**
```js
this.updateTheme = localStorage("__theme__", "light", this.handleValueChange);
this.updateTheme(prevValue => (prevTheme === "light" ? "dark" : "light"));
```
**Function component:**
```js
const [them, setTheme] = useLocalStorage("__theme__", "light");
onToggleTheme = () =>
setTheme(prevTheme => (prevTheme === "light" ? "dark" : "light"));
```
## Authors
* **Yaman KATBY** - *Initial work* - [Website](https://yaman.idewaxa.com/)
See also the list of [contributors](https://github.com/yamankatby/redux-immutable-helper/contributors) who participated in this project.
## License
This library is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.