--- title: App-dokumentasie-legstuk - React slug: app-dokumentasie-legstuk-react createdAt: 2023-11-17T14:25:39.130Z --- Ons het reeds sommige van die [voordele van kontekstuele dokumentasie](docId\:s62PYTKBz8ZhgbCOvVgnL) in die vorige hoofstuk verduidelik. Hierdie gids dien as ’n alternatief vir `React`- en `NextJS`-toepassings om die Archbee-app-widget op ’n meer elegante manier te integreer. ## Integreer app-widget :::::WorkflowBlock :::WorkflowBlockItem Installeer ons [npm-pakket](https://www.npmjs.com/package/@archbee/app-widget): ```shell # met npm $ npm install --save @archbee/app-widget # of met yarn $ yarn add @archbee/app-widget ``` ::: ::::WorkflowBlockItem Wanneer die pakket geïnstalleer is, gaan na u `jsx/tsx`-lêer en instansieer die komponent: :::CodeblockTabs React ```typescript import React from 'react'; import { ArchbeeAppWidget, AbWidgetRef } from '@archbee/app-widget' function App() { const widgetRef = useRef(null); return (
{ /** ... **/ }} // terugroepfunksie wat geroep word nadat widget oopgemaak is onWidgetClose={() => { /** ... **/ }} // terugroepfunksie wat geroep word nadat widget oopgemaak is >
); } ``` ::: :::: :::WorkflowBlockItem U kan ook na die inligting verwys vanaf **Spasie-instellings**: 1. Kies u **Ruimte **binne die redigeerder. 2. Klik op die ratikoon (⚙️) om na **Settings** te gaan. 3. Gaan na **Widget-integrasie**. 4. Klik op die `React`-oortjie en dan op die kopieerknoppie, en plak die kode in u .`tsx/.jsx`-lêer ::: ::::: Nou sal die widget alles agter die skerms hanteer. Moenie bekommerd wees nie, alles is gebundel en geminifiseer. Dit is slegs ’n 56Kb-aflaai en dit laai asynchroon, so u gebruikers sal nie ’n verskil opmerk nie. ### Komponent-eienskappe | **Eienskap** | **Tipe** | **Vereis** | **Beskrywing** | | ----------------------- | ----------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `spaceId` | `string` | `vereis` | Gee die verlangde id deur om u docs te laai. | | `docId` | `string` | `opsioneel` | Die doc waar u die widget docs wil oopmaak. Indien `docId` deurgegee word, word `widgetType` geïgnoreer; dit sal in `dokumente`-modus oopmaak ongeag die prop wat deurgegee is. | | `deelbareToken` | `string` | `opsioneel` | Gee die shareableToken van u private skakels deur om u docs te beskerm. | | `className` | `string` | `opsioneel` | Gee CSS-klasse deur aan die `div`-omhulsel. | | `widgetType` | `'dokumente' \| 'soek'` | `opsioneel` | Die verstekwaarde is `dokumente`. Dit maak die widget met die verlangde gedrag oop. `dokumente`-tipe sal die widget met die verstekgedrag oopmaak, `soek` sal 'n soek-widgetbalk oopmaak wat 'n soekbalk met AI-ondersteuning wys (indien dit by u intekening ingesluit is). | | `versteekNavigasiebalk` | `boolese` | `opsioneel` | Dit wys of versteek die boonste navigasiebalk van die widget-modal. By verstek is die navigasiebalk sigbaar. Indien u nie die navigasiebalk wil sien nie, gee dit deur met die `waar`-waarde, anders slaan dit net oor. | | `laaiStrategie` | `'gretig' \| 'lui'` | `opsioneel` | Verstekwaarde is `lui`. Laaistrategie-metode vir widget-laai. | | `borrel` | `onsigbaar \| vra` | `opsioneel` | Die verstekwaarde is `onsigbaar`. Indien gestel op `vra`, sal dit 'n borrel regs onder op u skerm vertoon. Wanneer iemand daarop klik, sal die soek-widget oopmaak. | | `bubblePlaceholder` | `string` | `opsioneel` | Die plekhouer wat in die borrelafdeling vertoon sal word. Indien nie deurgegee nie, sal 'n verstekwaarde van `Vra ’n vraag` vertoon word. | | `anker` | `string` | `opsioneel` | U kan u `klas`, `id` of `pad` verskaf vir 'n DOM-element waar u die widget wil anker en instansieer. Dit sal anker aan die eerste element wat in die DOM gevind word indien veelvuldige elemente met dieselfde path teenwoordig is. Die houer wat verskaf word, moet `position: relative` hê aangesien die widget vertoon sal word gebaseer op die eerste **relatief** **ouer** wat gevind word.
bv.: `anchor: "#my-container"` / `anchor: ".container-class"` | | `onWidgetOpen` | `leegte` | `opsioneel` | Terugroepfunksie wat geroep word nadat die widget oopmaak. | | `onWidgetClose` | `leegte` | `opsioneel` | Terugroepfunksie wat geroep word nadat die widget toemaak. | :::hint{type="info"} Deelbare tokens is beskikbaar in die [Skaalplan](https://www.archbee.com/pricing). Lees meer oor [Openbare toegangskontroles](docId\:AUGmcRhWp2Y0cvjzaVom3). ::: ### Ref-metodes :::hint{type="info"} Indien `ref` nie aan `ArchbeeAppWidget` deurgegee word nie, sal child-elements die modale opspringvenster outomaties oopmaak nadat daarop geklik is. ::: | **Eienskap** | **Tipe** | **Beskrywing** | | ------------ | -------- | --------------------------------------- | | `oop` | `metode` | Maak die widget programmaties oop. | | `maak toe` | `metode` | Maak die widget programmaties toe. | | `instansie` | `metode` | Gee die instansie van die widget terug. |