@dable-ad/react

React용 Dable 위젯 컴포넌트 라이브러리입니다.

설치

npm install @dable-ad/react

기본 사용법

DableWidget 컴포넌트

import { DableWidget } from '@dable-ad/react';

// 기본 추천 위젯
<DableWidget
  widgetId="your-widget-id"
  widgetType="reco"
/>

// 로그 포함 추천 위젯 (서비스명 필요)
<DableWidget
  widgetId="your-widget-id"
  widgetType="reco-log"
  serviceName="your-service-name"
/>

// 광고 위젯 (서비스명 필요)
<DableWidget
  widgetId="your-widget-id"
  widgetType="ads"
  serviceName="your-service-name"
/>

고급 사용법

useDable Hook

저수준 API로 Dable 함수에 직접 접근할 수 있습니다. 대부분의 경우 DableWidget 컴포넌트 사용을 권장합니다.

import { useDable } from '@dable-ad/react';

const dable = useDable();
dable('setService', 'your-service-name');
dable('renderWidget', 'dablewidget_your-widget-id');

TypeScript 지원

TypeScript 사용 시 별도 설정 없이 타입 안전성을 제공합니다:

• 자동완성 및 타입 체크
• 별도의 import type 불필요

예제

실제 동작하는 예제를 확인하려면:

git clone https://github.com/teamdable/widget-plugin.git
cd widget-plugin
npm install
cd examples/react-example
npm run dev

온라인에서 예제 코드 보기:

• React 예제 코드

요구사항

• React 18.2.0 이상