@sfbx/appconsent-react-tv-cmp

    0.3.3 • Public • Published

    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/

    Keywords

    none

    Install

    npm i @sfbx/appconsent-react-tv-cmp

    DownloadsWeekly Downloads

    5

    Version

    0.3.3

    License

    none

    Unpacked Size

    464 kB

    Total Files

    4

    Last publish

    Collaborators

    • sfbxdeveloper