React Appconsent CMP for TV

Install

npm install --save @sfbx/appconsent-react-tv-cmp

Component

Import the component and use it as follows:

import AppconsentCMP from '@sfbx/appconsent-react-tv-cmp'

function App() {
  const config = {
    appKey: 'YOUR_APP_KEY',
  }

  const useCMP = () => {
    window.__tcfapi('init', 2, () => {
      window.__tcfapi('show', 2, () => {}, { lazy: true })
    }, config)
  }

  return (
    <main>
      <AppconsentCMP onReady={useCMP} />
    </main>
  )
}

Component props

onReady

Function that will be called when global __tcfapi method is available.

Default value: () => {}.

onClose

Function that will be called when CMP is closed by back button. CMP can be closed only if canQuitCMP is set to true.

Default value: () => {}.

onPageChange

Function that will be called when a CMP page changes: the first page is opened, user opens new page or goes back to previous page.

Default value: () => {}.

canQuitCMP

Boolean that defines if the CMP can be closed by pressing back button in the root view.

Default value: false.

Back button event

additionalKeycodes

This property allows you to add additional keycodes. For the moment, only the return behavior is taken into account by the CMP with the following default values:

• Webos: 461
• Tizen: 10009
• Vidaa: 8

Use the following example to add additional keycodes:

import AppconsentCMP from '@sfbx/appconsent-react-tv-cmp'

function App() {
  const config = {
    appKey: 'YOUR_APP_KEY',
  }
  
  const additionalKeycodes =  {
    'back': [461] // back button keyCode for webos
  }

  const useCMP = () => {
    window.__tcfapi('init', 2, () => {
      window.__tcfapi('show', 2, () => {}, { lazy: true })
    }, config)
  }

  const onClose = () => {
    // your code
  }

  return (
    <main>
      <AppconsentCMP onReady={useCMP} onClose={onClose} canQuitCMP={true} additionalKeycodes={additionalKeycodes} />
    </main>
  )
}

Hook

useCMP hook exposes certain CMP methods. If you need to display the CMP, use the component instead of the hook.

import { useCMP } from '@sfbx/appconsent-react-tv-cmp'

export function MyComponent() {
  const cmp = useCMP()

  const main = async () => {
    await cmp.init(config)
    const shouldUpdate = await cmp.checkForUpdate()
  }

  useEffect(() => {
    main()
  }, [])

  return <></>
}

Following methods are available in the hook:

init: (configuration) => void // List of configuration options: https://docs.sfbx.io/configuration/notice-implementation/web-cmp/#configuration-object-example
checkForUpdate: () => boolean
setExternalIds: (ids: { [key: string]: string }) => void
getExternalIds: () => { [key: string]: string }
saveExternalIds: () => Promise<void>
extraFloatingAllowed: (id: string) => boolean
isFloatingNeedUpdate: (id: string) => boolean
saveFloatingPurposes: (purposes: { [key: string]: boolean }) => Promise<void>

Full documentation

Find out more on https://docs.sfbx.io/