open-index/open-npm huggingface dataset:
npm package: @sfbx/appconsent-react-tv-cmp
Description: ## Install
Latest version: 1.3.0

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

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

```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<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/](https://docs.sfbx.io/)