React Appconsent CMP for TV

Install

npm install --save 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, () => {}, config)
    window.__tcfapi('show', 2, () => {}, { lazy: true })
  }

  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

Use the following example to close the CMP when back button is pressed.

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

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

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

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

  return (
    <main>
      <AppconsentCMP onReady={useCMP} onClose={onClose} canQuitCMP={true} />
    </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://sfbx.gitbook.io/appconsent/configuration/step-3-notice-implementation/appconsent-for-javascript#configuration-object
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://sfbx.gitbook.io/appconsent/