<ConfirmicProvider />

The <ConfirmicProvider> is the easiest way of getting started. Just wrap your app with it pass in the projectId prop, and it'll inject the script tags for you into document.head.

Once the scripts have loaded, <ConfirmicProvider> will inform any <ConsentGate>s in your code whether they should block or allow their children to render.

Prop

Type

Default

Description

projectId

string

(required)

Your Confirmic project id

children

ReactElement

(required)

The rest of your app.

autoblocking

boolean

true

Whether autoblocking is on. This is separate from the setting in your dashboard, and must be set to true if you wish to enable autoblocking, so that the autoblocking configuration is also downloaded.

debug

boolean

false

Set to true to get console logs for when blocking or unblocking happens.

Advanced usage

Since <ConfirmicProvider> injects the Confirmic scripts via a side effect, this might not be compatible with your architecture. If you want to continue loading the Confirmic snippet outside of your React app, you can choose not to use the <ConfirmicProvider>, instead relying on the Confirmic snippet in your base HTML template.

Because <ConfirmicProvider> is simply syntactic sugar over the React Context that <ConsentGate> uses, you may simply write your own Context Provider. The main value here is the isReady value, which instructs any <ConsentGate> descendent of this provider that the Confirmic SDK has loaded and is available via window.Confirmic, and that it can check whether consent has been obtained.

import {ConfirmicContext} from '@confirmic/react'

export const MyConfirmicProvider = () => 
  <ConfirmicContext.Provider
    value={{
      // Only set this to true if, by the time the Provider is rendered, you
      // are sure that the `window.Confirmic` object is initialised. If you
      // have the snippet in your base HTML, this will be true.
      isReady: true,
      // Provide any function used for debugging.
      // If you wish to silence debug statements, pass in a noop () => {}
      debug: (...a) => console.log(`[confirmic]`, ...a),
      /* The set of rules powering autoblocking, keyed by micropolicy name:
        {
          micropolicy1: [rule1, rule2],
          micropolicy2: [rule1, rule2]
        }
        This is only used for debugging purposes for now, but might be used
        in future.
      */
      autoblockingRules: {},
    }}>
    {children}
  </ConfirmicContext.Provider>

Did this page help you?