1"use strict";(globalThis.webpackChunkwebsite_2=globalThis.webpackChunkwebsite_2||[]).push([[205],{25369:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>l});const r=JSON.parse('{"id":"reference/DiagramProvider","title":"<DiagramProvider/>","description":"This is a context provider that enables you to use various other components alongside a SurfaceComponent without having to explicitly connect them up.","source":"@site/react-docs/reference/DiagramProvider.mdx","sourceDirName":"reference","slug":"/reference/DiagramProvider","permalink":"/react/docs/reference/DiagramProvider","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"<DiagramProvider/>"}}');var o=t(74848),i=t(28453);const a={title:"<DiagramProvider/>"},s=void 0,c={},l=[{value:"Usage",id:"usage",level:2}];function d(e){const n={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:["This is a context provider that enables you to use various other components alongside a ",(0,o.jsx)(n.a,{href:"DiagramComponent",children:"SurfaceComponent"})," without having to explicitly connect them up."]}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:'import { DiagramProvider, \n DiagramComponent, \n ControlsComponent, \n MiniviewComponent} from "@visuallyjs/browser-ui-react"\n\nexport default function MyApp() {\n\n return <DiagramProvider>\n <DiagramComponent data={...}/>\n <ControlsComponent/>\n <MiniviewComponent/>\n </DiagramProvider>\n \n}\n'})}),"\n",(0,o.jsxs)(n.p,{children:["In this example, ",(0,o.jsx)(n.code,{children:"ControlsComponent"})," and ",(0,o.jsx)(n.code,{children:"MiniviewComponent"})," can both find the surface to attach to due to them all being contained within the ",(0,o.jsx)(n.code,{children:"DiagramProvider"})," element."]}),"\n",(0,o.jsx)(n.p,{children:"The list of components that are diagram context aware is:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"MiniviewComponent",children:"Miniview"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"ControlsComponent",children:"Controls"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"ExportControlsComponent",children:"ExportControls"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"DiagramPaletteComponent",children:"DiagramPalette"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"InspectorComponent",children:"Inspector"})}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},28453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>s});var r=t(96540);const o={},i=r.createContext(o);function a(e){const n=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),r.createElement(i.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.