React Appconsent CMP for TV

Install

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

Component

Import the component and use it as follows:

`jsx
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 (







)
}
`

$3

#### 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.




$3

#### 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:

`jsx
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 (







)
}
`

Hook

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

`js
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:
`ts
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
extraFloatingAllowed: (id: string) => boolean
isFloatingNeedUpdate: (id: string) => boolean
saveFloatingPurposes: (purposes: { [key: string]: boolean }) => Promise
``

Full documentation

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