@channel.io/wam-bridge-react

채널톡 WAM(Web App Messaging) 브리지의 React 바인딩 라이브러리입니다. React 애플리케이션에서 채널톡과의 통신을 쉽게 관리할 수 있는 컴포넌트와 훅을 제공합니다.

설치

npm install @channel.io/wam-bridge-react
# 또는
yarn add @channel.io/wam-bridge-react
# 또는
pnpm add @channel.io/wam-bridge-react

기능

• React 컨텍스트를 통한 WAM 브리지 상태 관리
• 사용하기 쉬운 React 훅
• TypeScript 지원
• 다양한 React 버전 지원 (16.8+, 17, 18)

사용법

프로바이더 설정

애플리케이션을 WamProvider로 감싸 WAM 브리지 상태를 관리합니다:

import { WamProvider } from '@channel.io/wam-bridge-react';

function App() {
  return (
    <WamProvider
      options={
        {
          /* 초기화 옵션 */
        }
      }
    >
      {/* 자식 컴포넌트 */}
      <YourComponent />
    </WamProvider>
  );
}

훅 사용하기

컴포넌트에서 useWam 훅을 사용하여 WAM 브리지 상태와 메서드에 접근합니다:

import { useWam } from '@channel.io/wam-bridge-react';

function YourComponent() {
  const wam = useWam();

  const handleSendMessage = () => {
    wam.sendMessage({
      type: 'custom-event',
      payload: {
        /* 데이터 */
      },
    });
  };

  return (
    <div>
      <button onClick={handleSendMessage}>메시지 보내기</button>
    </div>
  );
}

API 문서

<WamProvider>

WAM 브리지 상태를 관리하는 React 프로바이더 컴포넌트입니다.

Props

• options (선택사항): WAM 브리지 초기화 옵션
• children: React 노드

useWam()

현재 WAM 브리지 인스턴스를 반환하는 React 훅입니다.

반환값

WAM 브리지 인스턴스에 접근할 수 있는 객체:

• sendMessage(message): 메시지를 전송합니다.
• 기타 브리지 API 메서드

개발

# 의존성 설치
pnpm install

# 개발 모드 실행
pnpm dev

# 빌드
pnpm build

# 테스트 실행
pnpm test

라이센스

MIT