33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
import { useSyncExternalStore } from 'react'
|
|
|
|
/**
|
|
* The switches a browser keeps for an application, each off until set: keys maps each setting to its localStorage key.
|
|
* browserSetting reads one, setBrowserSetting keeps it and tells every user of useBrowserSetting, which follows it as
|
|
* it changes in this tab or in another tab of the browser. event names the event a change dispatches on window.
|
|
*/
|
|
export function createBrowserSettings<K extends string>(keys: Record<K, string>, event: string) {
|
|
function browserSetting(setting: K) {
|
|
return window.localStorage.getItem(keys[setting]) === 'on'
|
|
}
|
|
|
|
function setBrowserSetting(setting: K, enabled: boolean) {
|
|
window.localStorage.setItem(keys[setting], enabled ? 'on' : 'off')
|
|
window.dispatchEvent(new Event(event))
|
|
}
|
|
|
|
function subscribe(changed: () => void) {
|
|
window.addEventListener(event, changed)
|
|
window.addEventListener('storage', changed)
|
|
return () => {
|
|
window.removeEventListener(event, changed)
|
|
window.removeEventListener('storage', changed)
|
|
}
|
|
}
|
|
|
|
function useBrowserSetting(setting: K) {
|
|
return useSyncExternalStore(subscribe, () => browserSetting(setting))
|
|
}
|
|
|
|
return { browserSetting, setBrowserSetting, useBrowserSetting }
|
|
}
|