Skip to main content

useCookieListener()

The useCookieListener() hook monitors cookie changes and executes callbacks when specified cookies update. Use this to synchronize state across tabs/windows or react to authentication changes.

Import​

import { useCookieListener } from 'react-haiku';

Usage​

Loading...
import { useState } from 'react';
import { useCookieListener } from 'react-haiku';

export const Component = () => {
  const [lastChange, setLastChange] = useState('');

  useCookieListener(
    (value, key) => {
      setLastChange(`${key} changed to: ${value}`);
    },
    ['important_cookie'],
  );

  return (
    <>
      <p>Last change: {lastChange || 'None'}</p>
      <button onClick={() => (document.cookie = 'important_cookie=updated')}>
        Simulate Change
      </button>
    </>
  );
};

API​

Arguments​

  • effect - Callback function receiving (newValue, cookieKey)
  • cookies - Array of cookie names to monitor