Hooks: useStorage hook multi tab awareness

[anud12]

Describe the feature you would like to see added

The current implementation for useStorage isn't aware of the storage event.

Is your feature request related to a problem?

Due to the naming of the hook I expected it to react on changes originating from multiple tabs.

Describe the solution you'd like

The way that i envisioned this functionality is to have 2 hooks rather than 1 useSessionStorage and useLocalStorage and that would've freed the last parameter to be a flag of enabling the reactivity.

Sadly with the current implementation without breaking changes the constraints are high on where to add the flag, if the goal in using it should be succinct.

Describe alternatives you have considered

No response

Additional context

No response

[melloware]

@anud12 I think this can still be done let me take a look.

[melloware]

Please review my PR: #2888

It now listens to other tabs and there are two new hooks useLocalStorage and useSessionStorage that are just convenience hook wrappers.

[anud12]

Seems good.

Another small enhancement (but this is as pedantic as the convenience hooks) is to alter the definition a bit.
From

useStorage<S>(initialValue: S, key: string, storage?: StorageType): [S, React.Dispatch<React.SetStateAction<S>>]

To:

useStorage<S, K extends string = string>(initialValue: S, key: K, storage?: StorageType): [S, React.Dispatch<React.SetStateAction<S>>]

Because with that I can use the hook

type ValidKeyOptions = "key1" | "key2"
const [state, setState] = useStoarge<MyObject, ValidkeyOptions>({name: ""}, "key2");

This will ease the maintenance and refactoring because when i change the valid key options typescript would highlight if and where the key was used.

[melloware]

I like that change. Just pushed it to my PR.

[melloware]

Thanks for your great feedback and improvement. Since no PR component is using this hook yet this change is safe to make for 8.2.0