SharedValue.tsx

import React from 'react'
import { AnyValue } from 'react-values'

interface SharedProps<T> {
  // defaultValue?: T
  // value?: T
  // onChange?(value: T): void
  children(params: {
    value: T
    set(value: T): void
  }): JSX.Element | JSX.Element[] | null
  storageKey: string
}
type SharedEvent = CustomEvent<{ storageKey: string }>
export class SharedValue<T> extends React.Component<SharedProps<T>> {
  event: SharedEvent
  constructor(props: SharedProps<T>) {
    super(props)
    this.event = new CustomEvent(props.storageKey, {
      detail: { storageKey: props.storageKey },
    })
  }

  componentDidMount() {
    document.addEventListener(this.props.storageKey, this.handleEvent, false)
  }
  componentWillUnmount() {
    document.removeEventListener(this.props.storageKey, this.handleEvent)
  }
  performStorageUpdate = (value: T) => {
    
    window.localStorage.setItem(this.props.storageKey, JSON.stringify(value))
    document.dispatchEvent(this.event)
  }
  handleEvent = (e: SharedEvent) => {
    this.forceUpdate()
  }
  render() {
    const { storageKey, children } = this.props
    const storedValue = window.localStorage.getItem(storageKey)
    const value = storedValue ? JSON.parse(storedValue) : undefined
    return (
      <AnyValue
        value={value}
        onChange={this.performStorageUpdate}
        children={children}
      />
    )
  }
}