Nauseating Pumpkin Mush

    @looker/extension-sdk-react
    TypeScript icon, indicating that this package has built-in type declarations

    22.16.0 • Public • Published

    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 a provider that allows child components to access the Extension SDK.

    Provider

    Add the ExtensionProvider40 near the root of the extension component tree. ExtensionProvider40 exposes the Looker 4.0 sdk.

    <ExtensionProvider40
      loadingComponent={<div>Loading ...</div>}
      requiredLookerVersion=">=22.0.0"
    >
      <MyComponent />
    </ExtensionProvider40>
    • An optional loadingComponent can be passed in to display while the provider is establishing a connection with the looker host
    • requiredLookerVersion indicates what version of Looker is required. Check context.initializeError to see if a version error was detected.

    Access the Extension SDK

    import React, { useContext } from "react"
    import { ExtensionContext40 } from '@looker/extension-sdk-react'
    
    export const MyComponent: React.FC<{}> = () => {
      const { extensionSDK, coreSDK, initializeError } = useContext(ExtensionContext40)

    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 ExtensionProvider40 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 (
          <ExtensionProvider40 onPathnameChange={setPathname}>
            <MyLayout>
              <MySidebar pathname={pathname} />
              <Switch>
                <Route path=>
                  <MyRoute1 />
                </Route>
                <Route path='/route2'>
                  <MyRoute2 />
                </Route>
              </Switch>
            </MyLayout>
          </ExtensionProvider40>
      )
    }

    Looker SDK considerations

    The Looker SDK can be accessed as follows:

    The extension context exposes the following properties:

    • coreSDK - SDK version 4.0

    The following global access methods are available:

    • getCore40SDK() - SDK version 4.0

    There is no restriction on which SDK can be used within an extension, none, one or all of the above can be used interchangeably, context or global access. The one caveat is that it is recommended that the Looker version support SDK 4.0 if the 4.0 SDK is used (the results may be unpredictable otherwise).

    If you require access to SDK version 3.1, use <ExtensionProvider/> or <ExtensionProvider2 type={Looker31SDK}/>. SDK version 3.1 will then globally be available through the following methods:

    • getCoreSDK() - SDK version 3.1 (kept for backwards compatibility)
    • getCore31SDK() - SDK version 3.1

    Redux support

    The Looker SDK is available outside of the Extension provider using the getCore40SDK method. This means that redux sagas or redux thunks can utilize the SDK from within a saga or thunk. Note that the Looker connection MUST be established before getCoreSDK can be called. An error will be thrown if the method is called too soon. Note that children of the ExtensionProvider40 will not be rendered until after the connection has been established. As such it is safe for children of the ExtensionProvider40 to utilize sagas or thunks.

    Example saga

    import { getCore40SDK } from '@looker/extension-sdk-react'
    import { all, call, put, takeEvery, select } from 'redux-saga/effects'
    import {
      Actions,
      allLooksSuccess,
      runLookSuccess,
      error,
      Action,
      State,
    } from '.'
    
    function* allLooksSaga() {
      const coreSDK = getCore40SDK()
      const result = yield call([coreSDK, coreSDK.all_looks])
      if (result.ok) {
        // Take up to the first 10 looks
        const looks = result.value.slice(0, 9)
        yield put(allLooksSuccess(looks))
      } else {
        yield put(error(result.error.message))
      }
    }
    
    export function* sagaCallbacks() {
      yield all([takeEvery(Actions.ALL_LOOKS_REQUEST, allLooksSaga)])
    }

    Related Projects

    Install

    npm i @looker/extension-sdk-react

    DownloadsWeekly Downloads

    403

    Version

    22.16.0

    License

    MIT

    Unpacked Size

    221 kB

    Total Files

    129

    Last publish

    Collaborators

    • guyellis
    • looker-ops
    • scullin
    • jkaster
    • looker-open-source
    • fabio-looker
    • bryans99
    • mdodgelooker
    • dbchristopher
    • google-wombot