@looker/extension-sdk-react

Extension SDK For React

Installation

Add dependency to your project using yarn or npm

yarn add @looker/extension-sdk-react

or

npm install @looker/extension-sdk-react

Usage

The Extension SDK for react contains of a provider that allows child components to access the Extension SDK.

Provider

Add the ExtensionProvider near the root of the extension component tree.

      <ExtensionProvider onPathnameChange={setPathname}>
        <MyComponent/>
      </ExtensionProvider>

Access the Extension SDK

import React, { useContext } from "react"
import {
  ExtensionContext,
  ExtensionContextData
} from "@looker/extension-sdk-react"

export const MyComponent: React.FC<{}> = () => {
  const extensionContext = useContext<ExtensionContextData>(ExtensionContext)
  const extensionHost = extensionContext.extensionSDK
  const sdk = extensionContext.coreSDK

React Router

The Extension SDK for React supports React Router. Due to security restrictions of the sandboxed IFRAME only MemoryRouter is supported. The ExtensionProvider creates the router so you can add Switch and Route components as childrem. The Looker host is notified of changes to the React routes and the child route is appended to he Looker extension route. This means that the route can be restored on a page reload or sent as a link.

The ExtensionProvider can also notify the extension of changes to the route using the onPathnameChange attribute.

Example

export const MyExtension: React.FC<{}> = () => {
  const [pathname, setPathname] = useState("")

  return (
      <ExtensionProvider onPathnameChange={setPathname}>
        <MyLayout>
          <MySidebar pathname={pathname} />
          <Switch>
            <Route path=>
              <MyRoute1 />
            </Route>
            <Route path='/route2'>
              <MyRoute2 />
            </Route>
          </Switch>
        </MyLayout>
      </ExtensionProvider>
  )
}

Related Projects

• Looker extension template for react.
• Looker extension SDK.
• Looker SDK