Frontrow Frame SDK

This is the opinionated SDK that is used when building extensions for the Frontrow Platform.

Methods

• navigate - Will navigate the FrontRow Client App to the provided pathname
• resize - Will resize the FrontRow Client App (height only)
• getChannelID - Returns the ChannelID of the FrontRow Client App
• getParentLocation - Returns an object with parent Location information
• getPlatform - Returns the platform, one of: 'web', 'android', 'ios'
• getTheme - Returns the them value of the FrontRow Client App ('light'|'dark')
• getToken - Returns the OTP token string
• onThemeChange - Will call a callback if theme changes

Examples

Navigating the Parent Client

import { navigate } from '@frontrowcc/frame-sdk'

const HomeButton = () => {
  const onClick = () => {
    navigate({ pathname: '/' })
  }

  return <button onClick={onClick}>Go Home</button>
}

Resizing the Frame on the Parent Client

import { resize } from '@frontrowcc/frame-sdk'

type ListProps = {
  children: ReactNode
}

const ContentContainer = ({ children }: ListProps) => {
  const ref = useRef()
  const height = useRef<number>(0)

  useEffect(() => {
    if (ref.current) {
      const handleResize = () => {
        const newHeight = ref.current.getBoundingClientRect().height

        if (newHeight !== height) {
          height.current = newHeight
          // Call the resize function
          resize({ height: newHeight })
        }
      }

      const resizeObserver = new ResizeObserver(handleResize)

      resizeObserver.observe(ref.current)

      return () => {
        resizeObserver.disconnect()
      }
    }
  }, [ref])

  return <div ref={ref}>{children}</div>
}

Listening to theme changes

The parent app has views that can be in either light or dark mode, this value can be retrieved using a getter fn getTheme which will return a Theme type of 'light' | 'dark'.

You can also subscribe to theme changes by registering a callback function like this:

import { onThemeChange, getTheme } from '@frontrowcc/frame-sdk'

const intialTheme = getTheme()

// Set your themes initial Value, example:
document.documentElement.setAttribute('data-theme', initialTheme)


onThemeChange((theme) => {
  // Set your themes updated Value, example:
  document.documentElement.setAttribute('data-theme', theme)
})