---
title: วิดเจ็ตเอกสารประกอบแอป - React
slug: th/user-guides/react
createdAt: 2023-11-17T14:25:39.130Z
---

เราได้อธิบายบางส่วนของ[ประโยชน์ของเอกสารแบบมีบริบท](docId\:Jz_LSWT6B-jdY38M8DPd7) ในบทก่อนหน้านี้ คู่มือนี้ทำหน้าที่เป็นทางเลือกสำหรับ`React` และ `NextJS` แอปเพื่อผสานรวมวิดเจ็ตแอปของ Archbee ในวิธีที่ประณีตยิ่งขึ้น

## ผสานรวมวิดเจ็ตแอป

:::::WorkflowBlock
:::WorkflowBlockItem
ติดตั้ง [แพ็กเกจ npm ของเรา](https://www.npmjs.com/package/@archbee/app-widget):

```shell
# with npm
$ npm install --save @archbee/app-widget

# or with yarn
$ yarn add @archbee/app-widget
```
:::

::::WorkflowBlockItem
เมื่อติดตั้งแพ็กเกจแล้ว ให้ไปที่ไฟล์ `jsx/tsx` และสร้าง component ขึ้นมา:

:::CodeblockTabs
React

```typescript
import React from 'react';
import { ArchbeeAppWidget, AbWidgetRef } from '@archbee/app-widget'

function App() {
const widgetRef = useRef<AbWidgetRef>(null);

  return (
    <div>
        <ArchbeeAppWidget
            ref={widgetRef}
            spaceId={ /** published space id **/ }
            onWidgetOpen={() => { /** ... **/ }} // callback function called after widget has open
            onWidgetClose={() => { /** ... **/ }} // callback function called after widget has open
      >
        <button type='button' onClick={() => {
        <!-- Opens widget -->
            widgetRef.current?.open();
        }}>
          Open
        </button>
        
        <button type='button' onClick={() => {
        <!-- Closes widget -->
            widgetRef.current?.close();
        }}>
          Close
        </button>
        
        <button type='button' onClick={() => {
        <!-- Gets the instance of the widget if needed for various event manipulations. -->
            widgetRef.current?.instance();
        }}>
          Get widget instance
        </button>
      </ArchbeeAppWidget>
    </div>
  );
}
```
:::
::::

:::WorkflowBlockItem
คุณยังสามารถอ้างอิงข้อมูลจาก **การตั้งค่าสเปซ**:

1. เลือก **Space&#x20;**&#xE02;องคุณภายใน editor
2. คลิกที่ไอคอนรูปเฟือง (⚙️) เพื่อเข้าไปที่ **การตั้งค่า**
3. ไปที่ **การเชื่อมต่อวิดเจ็ต**.
4. คลิกที่แท็บ `React` จากนั้นคลิกปุ่มคัดลอก และวางโค้ดลงในไฟล์ `tsx/.jsx` ของคุณ
:::
:::::

ตอนนี้วิดเจ็ตจะจัดการทุกอย่างเบื้องหลังให้เอง ไม่ต้องกังวล ทุกอย่างถูกรวมและย่อขนาดแล้ว ไฟล์มีขนาดเพียง 56Kb และโหลดแบบอะซิงโครนัส ดังนั้นผู้ใช้ของคุณจะไม่รู้สึกถึงความแตกต่าง

### พร็อปของคอมโพเนนต์

| **คุณสมบัติ**    | **ประเภท** | **จำเป็น**  | **คำอธิบาย**                                                                                                                         |
| ---------------- | ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `spaceId`        | `string`   | `จำเป็น`    | ใส่ไอดีที่คุณต้องการเพื่อโหลดเอกสารของคุณ                                                                                            |
| `docId`          | `string`   | `ไม่จำเป็น` | เอกสารที่คุณต้องการเปิด widget docs หาก `docId` ถูกส่งมา `widgetType` จะถูกละเว้น และจะเปิดในโหมด `docs` ไม่ว่าค่าที่ส่งมาจะเป็นอะไร |
| `shareableToken` | `string`   | `ไม่จำเป็น` | ส่ง shareableToken จากลิงก์ส่วนตัวของคุณเพื่อปกป้องเอกสารของคุณ                                                                      |
| `className`      | `string`   | `ไม่จำเป็น` | ส่งคลาส CSS ให้กับตัวครอบ `div`                                                                                                      |

:::hint{type="info"}
โทเค็นที่สามารถแชร์ได้มีอยู่ใน[แผน Scaling](https://www.archbee.com/pricing) อ่านเพิ่มเติมเกี่ยวกับ[การควบคุมการเข้าถึงสาธารณะ](docId:23P5vUGc9LgzBSgmmd7aj).
:::

### วิธีการใช้อ้างอิง (Ref methods)

:::hint{type="info"}
ถ้า`ref` ไม่ได้ถูกส่งไปยัง`ArchbeeAppWidget`, องค์ประกอบย่อยจะเปิดหน้าต่างป๊อปอัปโดยอัตโนมัติเมื่อถูกคลิก
:::

| **คุณสมบัติ** | **ชนิด** | **คำอธิบาย**              |
| ------------- | -------- | ------------------------- |
| `เปิด`        | `เมธอด`  | เปิดวิดเจ็ตด้วยโปรแกรม    |
| `ปิด`         | `เมธอด`  | ปิดวิดเจ็ตด้วยโปรแกรม     |
| `อินสแตนซ์`   | `เมธอด`  | ส่งคืนอินสแตนซ์ของวิดเจ็ต |