<ConsentGate />

The main component is the <ConsentGate>, which tells React whether to render its children or not, based on whether the user has accepted the given micropolicy.

This is functionally equivalent to Manual blocking

import {ConsentGate} from '@confirmic/react'

const MyApp = () => (
  <ConsentGate micropolicy="my-policy">
    <MaybeBlockedComponent />
  </ConsentGate>
)

If you want to render a Placeholder in place of the blocked Component, simply add the placeholder prop. You can also pass in any parameters you want by passing an object into the placeholderParams prop.

import {ConsentGate} from '@confirmic/react'

const MyApp = () => (
  <ConsentGate
    micropolicy="my-policy"
    placeholder="/my-placeholder.html"
    placeholderParams={{
      color: 'blue',
      position: 'left',
    }}
  >
    <MaybeBlockedComponent />
  </ConsentGate>
)

Prop	Type	Default	Description
micropolicy	string	(required)	The micropolicy powering this `<ConsentGate/>`.
children	ReactElement	(required)	The component that should be blocked or unblocked. Only one node is allowed, but you may wrap multiple children in a React Fragment if desired.
placeholder	string	undefined	The url pointing to your Placeholder. You may also use one of the standard Confirmic placeholders
placeholderParams	Object	undefined	Any arbitrary params you wish to pass to the Placeholder.

Difference with HTML manual blocking

Because React isn't parsed the same way as regular HTML, we don't need a separate mechanisms for blocking different kinds of HTML elements

That is, instead of wondering if you should mutate the tag or wrap it, in React you always wrap the component you want to block.

import {ConsentGate} from '@confirmic/react'

const MyApp = () => (
  <ConsentGate
    micropolicy="my-policy"
    placeholder="/my-placeholder.html"
    placeholderParams={{
      color: 'blue',
      position: 'left',
    }}
  >
    <script src="some-external-thing.js" />
  </ConsentGate>
)

If the children of a <ConsentGate /> is a native DOM component (e.g. <img> <picture>, <iframe>, etc.), your placeholder will get the text property in its onReady() payload.

If children is a custom React component that you write or import from a library, the text property will simply be undefined. In most cases, you should rely on the placeholderParams prop to customise your placeholder, rather than parsing the DOMString representing the rendered HTML.