soyguijarro / react-storage-hooks Goto Github PK

The npm package is missing sources (referenced by the source maps). Would it be possible to:

1. remove source maps
2. add sources inline to source maps (https://www.typescriptlang.org/tsconfig/#inlineSourceMap)
3. add the src dir to package.json#files

  "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.

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.

Taking a quick look at the code, it doesn't seem like there's support for awaiting 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?

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.

Hi, would you consider adding an option to omit specific keys from being saved to storage?

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!

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

   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?

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

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

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!

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 🤔

Reproduction steps

I've set up an environment to reproduce: https://codesandbox.io/s/autumn-grass-vhu4e?expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark

1. Navigate to CodeSandbox
2. Switch to the Console tab (Second tab next to Terminal in the bottom right dev tools)
3. Click the + button a couple times so counter is !== 0
4. Click preview reload button
5. See warning in console

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

What's the problem

When having multiple instance with same localStorage entry, only one of them will sync with localStorage.

Expected behavior

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.

How to reproduce

Repeat the actions in the GIF with this sand box
https://codesandbox.io/s/react-storage-hooks-syincing-problem-7dgz5

ENV:

windows 1902
chrome 91
react 17

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 ?

Looks like a check for not just window is required, but window.addEventListener.

PR coming...

Take a closer look at:

• @pika/pack
• TSDX
• microbundle

Or set it up manually.

Also see:

• Relevant thread on Twitter
• Article about hybrid npm packages
• Article about building a React component library bundled with Rollup
• Example of creating a library using TypeScript and Rollup

After follow three steps:

Looks like there are some unknown errors

Wait for help🤔

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!