How to use @rehooks/local-storage - 5 common examples

updateTyping,
    updateWebview,
    updateSession,
    updateUser,
    updateLastRoutePath,
    updateHandoff,
    updateTheme,
    updateDevSettings,
    toggleWebchat,
    setError,
    openWebviewT,
    closeWebviewT,
  } = props.webchatHooks || useWebchat()
  const { theme } = webchatState
  const { initialSession, initialDevSettings, onStateChange } = props
  const [botonicState, saveState, deleteState] = useLocalStorage('botonicState')
  const [persistentMenuOpened, setPersistentMenuOpened] = useState(false)
  const [emojiPickerOpened, setEmojiPickerOpened] = useState(false)
  const [attachment, setAttachment] = useState({})

  const getThemeProperty = _getThemeProperty(theme)

  const handleAttachment = event => {
    setAttachment({
      fileName: event.target.files[0].name,
      file: event.target.files[0], // TODO: Attach more files?
      attachmentType: getAttachmentType(event.target.files[0].type),
    })
  }

  useEffect(() => {
    sendAttachment(attachment)

(err, data: INetlifyResponse) => {
      if (err) {
        alert('Could not authenticate. Try again later.')
        return console.error(err)
      }

      writeStorage(GITHUB_TOKEN_KEY, data.token)
    }
  )

const ChartWrapper: React.FC = ({ entityType, selectedIds }) => {
  const [storedStartAndEndDates, setStoredStartAndEndDates] = useLocalStorage<
    [string, string]
  >("home_selectedDates", [defaultStartDate.toISO(), defaultEndDate.toISO()]);

  const getStartDate = () =>
    storedStartAndEndDates === null
      ? defaultStartDate
      : DateTime.fromISO(storedStartAndEndDates[0]);
  const getEndDate = () =>
    storedStartAndEndDates === null
      ? defaultEndDate
      : DateTime.fromISO(storedStartAndEndDates[1]);

  const getStartAndEndDates = (): [DateTime, DateTime] => [
    getStartDate(),
    getEndDate()
  ];

const useStoredDatePair = (
  storageKey: string,
  defaultStartDate: DateTime,
  defaultEndDate: DateTime
) => {
  const [storedStartAndEndDates, setStoredStartAndEndDates] = useLocalStorage<[string, string]>(
    storageKey + "_selectedDates",
    [defaultStartDate.toISO(), defaultEndDate.toISO()]
  );

  const getStartDate = () =>
    storedStartAndEndDates === null
      ? defaultStartDate
      : DateTime.fromISO(storedStartAndEndDates[0]);

  const getEndDate = () =>
    storedStartAndEndDates === null ? defaultEndDate : DateTime.fromISO(storedStartAndEndDates[1]);

  const getStartAndEndDates = (): [DateTime, DateTime] => [getStartDate(), getEndDate()];

  const setStartAndEndDates = (startDate: DateTime, endDate: DateTime) => {
    setStoredStartAndEndDates([startDate.toISO(), endDate.toISO()]);

function AuthenticatedQuery(props: QueryProps) {
  const [token] = useLocalStorage(GITHUB_TOKEN_KEY)
  const skip = props.skip || !token
  const context = { token, ...props.context }

  return  {...props} skip={skip} context={context} />
}