Reactでカスタムイベントを作成・トリガーする完全ガイド

const customEvent = new CustomEvent('myCustomEvent', {
  detail: { message: 'Hello from Custom Event!' },
});

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const customEvent = new CustomEvent('customReactEvent', {
      detail: { status: 'Initialized' },
    });

    // DOM要素にカスタムイベントをディスパッチ
    document.dispatchEvent(customEvent);
  }, []);

  return <div>カスタムイベントを作成しました！</div>;
};

export default MyComponent;

const eventData = { userId: 123, action: 'click' };
const customEvent = new CustomEvent('userAction', { detail: eventData });
document.dispatchEvent(customEvent);

const customEvent = new CustomEvent('myCustomEvent', {
  detail: { message: 'Triggered from React!' },
});

// トリガー（発火）
document.dispatchEvent(customEvent);

import React from 'react';

const TriggerEventComponent = () => {
  const handleClick = () => {
    const customEvent = new CustomEvent('buttonClicked', {
      detail: { buttonId: 'submitButton' },
    });

    // カスタムイベントを発火
    document.dispatchEvent(customEvent);
    console.log('カスタムイベントが発火しました');
  };

  return (
    <button onClick={handleClick}>カスタムイベントをトリガー</button>
  );
};

export default TriggerEventComponent;

const targetElement = document.getElementById('target');
const customEvent = new CustomEvent('elementFocus', {
  detail: { focusTime: new Date() },
});

// 要素に対してイベントを発火
if (targetElement) {
  targetElement.dispatchEvent(customEvent);
}

const fetchDataAndTriggerEvent = async () => {
  const data = await fetch('/api/data').then((res) => res.json());

  const customEvent = new CustomEvent('dataLoaded', {
    detail: { data },
  });

  document.dispatchEvent(customEvent);
};

fetchDataAndTriggerEvent();

document.addEventListener('myCustomEvent', (event) => {
  console.log('カスタムイベントがキャッチされました:', event.detail);
});

import React, { useEffect } from 'react';

const EventListenerComponent = () => {
  useEffect(() => {
    const handleCustomEvent = (event) => {
      console.log('Reactでカスタムイベントを受信:', event.detail);
    };

    // カスタムイベントのリスナーを登録
    document.addEventListener('myCustomEvent', handleCustomEvent);

    // クリーンアップ処理
    return () => {
      document.removeEventListener('myCustomEvent', handleCustomEvent);
    };
  }, []);

  return <div>カスタムイベントのリスナーを登録しました！</div>;
};

export default EventListenerComponent;

useEffect(() => {
  const handleEventOne = (event) => console.log('Event One:', event.detail);
  const handleEventTwo = (event) => console.log('Event Two:', event.detail);

  document.addEventListener('eventOne', handleEventOne);
  document.addEventListener('eventTwo', handleEventTwo);

  return () => {
    document.removeEventListener('eventOne', handleEventOne);
    document.removeEventListener('eventTwo', handleEventTwo);
  };
}, []);

const element = document.getElementById('targetElement');

if (element) {
  element.addEventListener('customEvent', (event) => {
    console.log('特定の要素でカスタムイベントを受信:', event.detail);
  });
}

document.addEventListener('customEvent', (event) => {
  if (event.target.id === 'specificElement') {
    console.log('特定の子要素からのカスタムイベントを処理:', event.detail);
  }
});

import React, { useState, useEffect } from 'react';

const Modal = () => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const openModal = () => setIsVisible(true);
    const closeModal = () => setIsVisible(false);

    document.addEventListener('openModal', openModal);
    document.addEventListener('closeModal', closeModal);

    return () => {
      document.removeEventListener('openModal', openModal);
      document.removeEventListener('closeModal', closeModal);
    };
  }, []);

  return isVisible ? (
    <div className="modal">
      <p>これはモーダルウィンドウです。</p>
      <button onClick={() => document.dispatchEvent(new Event('closeModal'))}>
        閉じる
      </button>
    </div>
  ) : null;
};

export default Modal;

const TriggerModalButton = () => (
  <button onClick={() => document.dispatchEvent(new Event('openModal'))}>
    モーダルを開く
  </button>
);

import React, { useState, useEffect } from 'react';

const Notification = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const handleNotification = (event) => {
      setMessage(event.detail.message);
      setTimeout(() => setMessage(''), 3000); // 3秒で自動消去
    };

    document.addEventListener('notify', handleNotification);

    return () => {
      document.removeEventListener('notify', handleNotification);
    };
  }, []);

  return message ? <div className="notification">{message}</div> : null;
};

export default Notification;

const TriggerNotification = () => (
  <button
    onClick={() =>
      document.dispatchEvent(
        new CustomEvent('notify', { detail: { message: '新しい通知です！' } })
      )
    }
  >
    通知を表示
  </button>
);

const fetchData = async () => {
  const data = await fetch('/api/data').then((res) => res.json());

  document.dispatchEvent(
    new CustomEvent('apiDataFetched', { detail: { data } })
  );
};

import React, { useEffect } from 'react';

const DataDisplay = () => {
  useEffect(() => {
    const handleApiData = (event) => {
      console.log('APIデータを受信しました:', event.detail.data);
    };

    document.addEventListener('apiDataFetched', handleApiData);

    return () => {
      document.removeEventListener('apiDataFetched', handleApiData);
    };
  }, []);

  return <div>APIからのデータを待っています...</div>;
};

export default DataDisplay;

window.addEventListener('storage', (event) => {
  if (event.key === 'sharedState') {
    const data = JSON.parse(event.newValue);
    document.dispatchEvent(new CustomEvent('sharedStateChanged', { detail: data }));
  }
});

document.addEventListener('myEvent', () => console.log('イベントキャッチ成功'));
document.dispatchEvent(new CustomEvent('myEvent'));

useEffect(() => {
  const handleEvent = () => console.log('イベントキャッチ');

  document.addEventListener('myEvent', handleEvent);

  return () => {
    document.removeEventListener('myEvent', handleEvent);
  };
}, []); // 第二引数を適切に設定

const customEvent = new CustomEvent('myEvent', { detail: { key: 'value' } });
console.log(customEvent.detail); // コンソールで確認
document.dispatchEvent(customEvent);

import _ from 'lodash';

const throttledEvent = _.throttle(() => {
  console.log('高頻度のイベントを制御');
}, 200);

document.addEventListener('scroll', throttledEvent);

const specificElement = document.getElementById('myElement');

if (specificElement) {
  specificElement.addEventListener('myEvent', (event) => {
    event.stopPropagation();
    console.log('特定の要素でイベントを処理');
  });
}

const customEvent = new CustomEvent('app-update', {
  detail: { version: '1.2.3', changelog: 'Bug fixes and improvements' },
});

useEffect(() => {
  const handleEvent = () => console.log('Event received');
  document.addEventListener('customEvent', handleEvent);

  return () => {
    document.removeEventListener('customEvent', handleEvent);
  };
}, []);

import _ from 'lodash';

const throttledEvent = _.throttle(() => {
  document.dispatchEvent(new CustomEvent('scroll-event', { detail: { position: window.scrollY } }));
}, 200);

window.addEventListener('scroll', throttledEvent);

const targetElement = document.getElementById('target');
targetElement?.addEventListener('customEvent', (e) => console.log(e.detail));

test('customEvent triggers correctly', () => {
  const mockHandler = jest.fn();
  document.addEventListener('testEvent', mockHandler);

  const event = new CustomEvent('testEvent', { detail: { key: 'value' } });
  document.dispatchEvent(event);

  expect(mockHandler).toHaveBeenCalledWith(event);
});

export const dispatchCustomEvent = (eventName, detail) => {
  const event = new CustomEvent(eventName, { detail });
  document.dispatchEvent(event);
};

dispatchCustomEvent('user-logged-in', { userId: 123 });