# Framework Usage Examples
## General Notes
- `bindEl` 对应的 DOM 节点必须已经挂载
- 请只在客户端初始化，不要在 SSR 阶段执行 `new TAC(...)`
- 销毁页面或组件时，调用 `tac.destroyWindow()`
- React Native 需要通过 `WebView` 使用，本 SDK 不能直接运行在原生视图树里
## Next.js
### App Router
`app/layout.tsx`
```tsx
import "captcha-web-sdk/style.css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`app/components/captcha-box.tsx`
```tsx
"use client";
import { useEffect } from "react";
import TAC from "captcha-web-sdk";
export default function CaptchaBox() {
useEffect(() => {
const tac = new TAC({
requestCaptchaDataUrl: "/api/captcha/gen",
validCaptchaUrl: "/api/captcha/check",
bindEl: "#captcha-box"
});
tac.init();
return () => {
tac.destroyWindow();
};
}, []);
return ;
}
```
## React
```tsx
import { useEffect } from "react";
import TAC from "captcha-web-sdk";
import "captcha-web-sdk/style.css";
export default function CaptchaBox() {
useEffect(() => {
const tac = new TAC({
requestCaptchaDataUrl: "/captcha/gen",
validCaptchaUrl: "/captcha/check",
bindEl: "#captcha-box",
validSuccess: (res, c, tacInstance) => {
tacInstance.destroyWindow();
console.log("success", res);
}
});
tac.init();
return () => {
tac.destroyWindow();
};
}, []);
return ;
}
```
## Vue 3
```vue
```
## Vue 2
```vue
```
## React Native
React Native 中不能直接使用 DOM 版 SDK。推荐通过 `react-native-webview` 在 WebView 中加载。
```tsx
import React from "react";
import { WebView } from "react-native-webview";
const html = `
`;
export default function CaptchaWebView() {
return (
{
const data = JSON.parse(event.nativeEvent.data);
console.log(data);
}}
/>
);
}
```