วิดเจ็ตเอกสารประกอบแอป - React
เราได้อธิบายบางส่วนของประโยชน์ของเอกสารแบบมีบริบท ในบทก่อนหน้านี้ คู่มือนี้ทำหน้าที่เป็นทางเลือกสำหรับReact และ NextJS แอปเพื่อผสานรวมวิดเจ็ตแอปของ Archbee ในวิธีที่ประณีตยิ่งขึ้น
ผสานรวมวิดเจ็ตแอป
ติดตั้ง แพ็กเกจ npm ของเรา:
# with npm
$ npm install --save @archbee/app-widget
# or with yarn
$ yarn add @archbee/app-widgetเมื่อติดตั้งแพ็กเกจแล้ว ให้ไปที่ไฟล์ jsx/tsx และสร้าง component ขึ้นมา:
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>
);
}คุณยังสามารถอ้างอิงข้อมูลจาก การตั้งค่าสเปซ:
- เลือก Space ของคุณภายใน editor
- คลิกที่ไอคอนรูปเฟือง (⚙️) เพื่อเข้าไปที่ การตั้งค่า
- ไปที่ การเชื่อมต่อวิดเจ็ต.
- คลิกที่แท็บ React จากนั้นคลิกปุ่มคัดลอก และวางโค้ดลงในไฟล์ tsx/.jsx ของคุณ
ตอนนี้วิดเจ็ตจะจัดการทุกอย่างเบื้องหลังให้เอง ไม่ต้องกังวล ทุกอย่างถูกรวมและย่อขนาดแล้ว ไฟล์มีขนาดเพียง 56Kb และโหลดแบบอะซิงโครนัส ดังนั้นผู้ใช้ของคุณจะไม่รู้สึกถึงความแตกต่าง
พร็อปของคอมโพเนนต์
คุณสมบัติ | ประเภท | จำเป็น | คำอธิบาย |
|---|---|---|---|
spaceId | string | จำเป็น | ใส่ไอดีที่คุณต้องการเพื่อโหลดเอกสารของคุณ |
docId | string | ไม่จำเป็น | เอกสารที่คุณต้องการเปิด widget docs หาก docId ถูกส่งมา widgetType จะถูกละเว้น และจะเปิดในโหมด docs ไม่ว่าค่าที่ส่งมาจะเป็นอะไร |
shareableToken | string | ไม่จำเป็น | ส่ง shareableToken จากลิงก์ส่วนตัวของคุณเพื่อปกป้องเอกสารของคุณ |
className | string | ไม่จำเป็น | ส่งคลาส CSS ให้กับตัวครอบ div |
โทเค็นที่สามารถแชร์ได้มีอยู่ในแผน Scaling อ่านเพิ่มเติมเกี่ยวกับการควบคุมการเข้าถึงสาธารณะการควบคุมการเข้าถึงแบบสาธารณะ.
วิธีการใช้อ้างอิง (Ref methods)
ถ้าref ไม่ได้ถูกส่งไปยังArchbeeAppWidget, องค์ประกอบย่อยจะเปิดหน้าต่างป๊อปอัปโดยอัตโนมัติเมื่อถูกคลิก
คุณสมบัติ | ชนิด | คำอธิบาย |
|---|---|---|
เปิด | เมธอด | เปิดวิดเจ็ตด้วยโปรแกรม |
ปิด | เมธอด | ปิดวิดเจ็ตด้วยโปรแกรม |
อินสแตนซ์ | เมธอด | ส่งคืนอินสแตนซ์ของวิดเจ็ต |