A custom hook to help post message state management

usePostMessageState.ts

import { useEffect, useState } from 'react';

export function isDevelopment() {
  return process.env.NODE_ENV === 'development';
}

const domain = `${isDevelopment() ? 'http' : 'https'}://${window.location.host}`;

const addPrefix = (key: string) => `some-prefix-${key}`;

export const sendMessage = <Data>(key: string, state: Data) =>
  window.parent.postMessage({ key: addPrefix(key), state }, domain);
  
export const useMessageState = <Data>(key: string): Data | undefined => {
  const [state, setState] = useState<Data | undefined>(undefined);

  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      if (event.data.key === addPrefix(key)) {
        setState(event.data.state);
      }
    };

    window.addEventListener('message', handleMessage);

    return () => {
      window.removeEventListener('message', handleMessage);
    };
  }, [key]);

  return state;
};