Skip to main content

<SurfaceProvider/>

This is a context provider that enables you to use various other components alongside a SurfaceComponent without having to explicitly connect them up.

Usage​

import { SurfaceProvider, 
    SurfaceComponent, 
    ControlsComponent, 
    MiniviewComponent} from "@visuallyjs/browser-ui-react"

export default function MyApp() {

    return <SurfaceProvider>
        <SurfaceComponent data={...}/>
        <ControlsComponent/>
        <MiniviewComponent/>
    </SurfaceProvider>
    
}

In this example, ControlsComponent and MiniviewComponent can both find the surface to attach to due to them all being contained within the SurfaceProvider element.

The list of components that are surface context aware is: