Widget de documentación de la aplicación - React

ya hemos explicado algunos de los docid\ lbcp45wy1xusk loabch en el capítulo anterior esta guía sirve como una alternativa para react y nextjs aplicaciones para integrar el widget de la aplicación archbee de una manera más elegante integrar widget de la aplicación instala nuestro https //www npmjs com/package/@archbee/app widget # with npm $ npm install save @archbee/app widget \# or with yarn $ yarn add @archbee/app widget cuando se instala el paquete, ve a tu jsx/tsx archivo e instancia el componente react 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> ); } también puedes hacer referencia a la información de configuraciones del espacio selecciona tu espacio dentro del editor haz clic en el ícono de engranaje (⚙️) para entrar en configuración ir a integración de widgets haz clic en el react pestaña y luego en el botón de copiar, y pega el código en tu tsx/ jsx archivo ahora, el widget manejará todo detrás de escena no te preocupes, todo está empaquetado y minificado es una descarga de apenas 56kb y se carga de manera asíncrona, por lo que tus usuarios no notarán la diferencia props del componente propiedad tipo requerido descripción idespacio cadena requerido pase el id deseado para cargar sus documentos iddoc cadena opcional el documento donde deseas abrir la documentación del widget si docid se pasa, widgettype se ignora, se abrirá en docs modo independientemente de la propiedad pasada token compartible cadena opcional pasa el token compartible desde tus enlaces privados para proteger tus documentos nombredeclase cadena opcional pase clases css al div envoltorio tipodewidget 'docs' | 'buscar' opcional el valor predeterminado es docs esto abre el widget con el comportamiento deseado docs el tipo abrirá el widget con el comportamiento predeterminado, search abrirá una barra de widget de búsqueda que muestra una barra de búsqueda con soporte de ia (si está incluido en su suscripción) ocultarbarranavegación booleano opcional muestra u oculta la barra de navegación superior del modal del widget por defecto, la barra de navegación es visible si no quieres ver la barra de navegación, pásala con verdadero valor, de lo contrario, simplemente omítelo estrategiadecarga 'ansioso' | 'perezoso' opcional el valor predeterminado es perezoso método de estrategia de carga para la carga de widgets burbuja invisible | preguntar opcional el valor predeterminado es invisible si se establece en preguntar , se mostrará un globo en la esquina inferior derecha de su pantalla siempre que alguien haga clic en él, el widget de búsqueda se abrirá marcadordeburbuja cadena opcional el marcador de posición que se mostrará en la sección de burbujas si no se pasa, se mostrará un valor predeterminado de haz una pregunta se mostrará ancla cadena opcional puedes proporcionar tu clase , id o ruta a un elemento dom donde te gustaría que el widget se ancle e instancie se anclará al primer elemento encontrado en el dom, si hay múltiples elementos con la misma ruta presentes el contenedor proporcionado debe tener posición relativa ya que el widget se mostrará basado en el primer relativo padre encontrado e j ancla "#mi contenedor" / ancla " clase contenedor" alabrirwidget vacío opcional callback que se llama después de que el widget se abre alcerrarwidget vacío opcional callback que se llama después de que el widget se cierra los tokens compartibles están disponibles en el https //www archbee com/pricing lee más sobre docid\ nkogchhwnaziykypvbfmd métodos de referencia si ref no se pasa a archbeeappwidget , los hijos abrirán automáticamente el modal emergente al ser clickeados propiedad tipo descripción abierto método abre el widget programáticamente cerrar método cierra el widget programáticamente instancia método devuelve la instancia del widget