soyguijarro / react-storage-hooks Goto Github PK
View Code? Open in Web Editor NEWReact hooks for persistent state
Home Page: https://npm.im/react-storage-hooks
License: MIT License
React hooks for persistent state
Home Page: https://npm.im/react-storage-hooks
License: MIT License
This currently can't be used in a server-side rendered app because localStorage
, sessionStorage
, and window
don't exist.
ReferenceError: localStorage is not defined
Can we add either some mock objects or noops if these are missing?
Thanks!
"peerDependencies": {
"react": "^16.8.0"
},
leads to a
npm WARN [email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
if you are using React 17.
We have a list of items for which we store the list filters using useReducer
. We want to store certain filters using useStorageReducer
but not all of them. For example the filter state looks like this:
{
perPage: 6,
pageNumber: 1,
searchText: '',
sortBy: 'id',
view: 'card', // or 'table'
}
We want to store only view
and perPage
in local storage not the other keys.
Related #6
First of all, i would like to thank that you have created this library.
We tried to use it with React ^16.9.0-alpha.0
we created a simple test component and with a state and a counter. When the button is pushed we dispatch an update to the counter. the screen keeps updating the counter. jumping between counter and counter+1. The session storage contains the right value.
code to reproduce:
import 'react-app-polyfill/ie11';
import 'ts-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {useSessionStorageReducer} from 'react-storage-hooks';
function reducer(state, action) {
return action;
}
function TestComponent() {
const [state, dispatch] = useSessionStorageReducer('key', reducer, {some: 'value', counter: 0});
return <button onClick={() => dispatch({...state, counter: state.counter + 1})}>{JSON.stringify(state)}</button>
}
ReactDOM.render(<TestComponent/>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
Thanks for your time and effort
Hi, first thanks for this great library!
I'm using this library to store a cart-like state inside my CartComponent
:
const [cart, dispatch] = useStorageReducer(localStorage, 'cart', cartReducer, {
createdAt: Math.floor(Date.now() / 1000),
items: []
});
I'm wondering, how to invalidate the storage after 1 hour, for example? In other words, useStorageReducer
should return { items: [] } after 1 hour, re-setting the state eventually stored in the localStorage
object.
Is this possible? Thanks!
Hi, would you consider adding an option to omit specific keys from being saved to storage?
Take a closer look at:
Or set it up manually.
Also see:
I'm using Next.js with SSR.
After saving my form data in local storage and refreshing the page, my form renders with the correct values but I get the following warning, although I'm using a dummy storage object like suggested in the readme: Warning: Prop 'aria-valuenow' did not match. Server: "10000" Client: "11000"
.
Here is the relevant part of my code:
const dummyStorage = {
getItem: () => null,
setItem: () => {},
removeItem: () => {},
};
export default function createClient() {
const [formInitialValues, setFormInitialValues, writeErrors] =
useStorageState(
typeof window !== "undefined" ? localStorage : dummyStorage,
"awaji",
{
lastName: "",
firstName: "",
gender: "male",
dateOfBirth: "",
initialCredit: 10000,
}
);
const onSubmit = useCallback((values, actions) => {
console.log(values);
setFormInitialValues(values);
}, []);
// rest of the code...
Any way to properly fix this ?
const MyComponent = () => {
const [state, dispatch, writeError] = useLocalStorageReducer(
key,
reducer,
{
count: 1
}
);
console.log(state)
return null
}
This initially logs state
as undefined
a few times until dispatch is called, which is causing unexpected behaviour with my code.
Is this intentional?
Thanks for this library!
We use the useStorageState
hook to persist some state to local storage while the user is typing, so we can restore it on refresh.
Recently, we received a report that when they typed, the browser locked up and had to be restarted. They're not able to reproduce it reliably, and we haven't been able to reproduce it easier.
I was able to reproduce it synthetically by adding
window.localStorage.setItem = () => {
throw new Error('my error ' + Date.now())
}
where this library goes into an infinite loop trying to handle the error (even if you're not writing to local storage). This might be a red herring, or might be the root cause.
Thoughts?
Downstream issue: tilt-dev/tilt#4618
When having multiple instance with same localStorage entry, only one of them will sync with localStorage.
All instances will sync with localStorage as it is said in the documentation.
Automatically stringifies and parses values coming and going to storage, keeps state in sync between tabs by listening to
storage events
and handles non-straightforward use cases correctly.
Repeat the actions in the GIF with this sand box
https://codesandbox.io/s/react-storage-hooks-syincing-problem-7dgz5
windows 1902
chrome 91
react 17
The npm package is missing sources (referenced by the source maps). Would it be possible to:
src
dir to package.json#files
node_modules/react-storage-hooks/dist/index.js:1
(function (exports, require, module, __filename, __dirname) { import { useState, useReducer } from 'react';
^^^^^^
SyntaxError: Unexpected token import```
Looks like the code is compiled for es6+, Could you recompile it using es5 as a target.
Taking a quick look at the code, it doesn't seem like there's support for await
ing on getItem
, setItem
or removeItem
from the storage instance.
Would a change like this be as simple as converting the methods to support async/await
?
Do you see any other challenges with making the change?
Could this library provide a "sharedSessionStorage" that would work just like "sessionStorage", but with synchronization between different tabs?
It could use BroadcastChannel to keep them in sync.
I think it should look like this:
const bc = new BroadcastChannel('sharedSessionStorage');
bc.onmessage = (evt) => {
const { action, key, value } = JSON.parse(evt.data);
switch (action) {
case 'setItem':
sessionStorage.setItem(key, value);
break;
case 'removeItem':
sessionStorage.removeItem(key);
break;
default:
}
};
export const sharedSessionStorage = {
getItem: (key) => sessionStorage.getItem(key),
setItem: (key, value) => {
sessionStorage.setItem(key, value);
bc.postMessage(JSON.stringify({ action: 'setItem', key, value }));
},
removeItem: (key) => {
sessionStorage.removeItem(key);
}
};
But it doesn't seem to notify the useStorageState
hooks when a new value is set from a BroadcastChannel message.
Below are the minimal code setup to reproduce the issue:
import React from 'react'
import ReactDOM from 'react-dom'
import { useSessionStorageReducer, useLocalStorageReducer } from 'react-storage-hooks'
function Root() {
const [state1, dispatch1] = useSessionStorageReducer('session', () => {}, {})
const [state2, dispatch2] = useLocalStorageReducer('local', () => {}, {})
return (
<div>hi</div>
)
}
ReactDOM.render(<Root />, document.getElementById('root'))
Edit:
It seems that multiple useLocalStorageReducer
would also crash ie11
% npm install --save react-storage-hooks
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/react-storage-hooks
npm ERR! react-storage-hooks@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Related issue: #7
reproducible case:
const Potato = () => {
console.log("hello");
const [state, dispatch] = useStorageReducer(
window.sessionStorage,
"potato",
() => {},
{},
);
return <h1>Potato</h1>;
};
ReactDOM.render(
<StrictMode>
<Potato />
<Potato />
</StrictMode>,
document.getElementById('root'),
);
you will get an infinite amount of "hello"s in the console. Only reproducible on ie11.
Hey, this module is great and we use it over at https://github.com/dayhaysoos/use-shopping-cart :) ❤️
We've had some folks run into this issue (dayhaysoos/use-shopping-cart#122) which seems to be a hydration warning because the server-side rendered value differs from the value on the client.
Have you seen that before by any chance? I did some digging, and the general recommendation is to use the same initial state as on the server, and then update it in a useEffect
hook, but I'm not sure if that's possible within a custom hook 🤔
I've set up an environment to reproduce: https://codesandbox.io/s/autumn-grass-vhu4e?expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark
Console
tab (Second tab next to Terminal
in the bottom right dev tools)Hello,
thanks for providing this hook, works good when I tested it for my use-case.
Although while working with it, there is one operation that is missing for me - clearing of the keys in various storages. I am aware, that I could just set the value of the key to an empty one (e.g. setting it to an empty string), but when I'm done with the key, I would expect to remove it altogether from these storages, as to not clutter the storage with empty keys.
Thanks in advance!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.