## Install
npm install @sfbx/appconsent-react-tv-cmp```
npm install --save @sfbx/appconsent-react-tv-cmp
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 (
)
}
`
#### 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.
#### 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: 46110009
- Tizen: 8
- Vidaa:
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 (
)
}
`
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
Find out more on https://docs.sfbx.io/