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