Frame

The Frame component provides an elegant way to conditionally render children based on consent, with a placeholder for when consent is not given. This is designed perfectly for Iframe components like youtube embeds that should only be shown when consent is granted.

Usage

The frame component provides a pre-built placeholder, however, this can be modified with a more custom placeholder to suit your needs.

export default function App() {
  return (
    <>
      <Frame category="marketing" style={{ width: '500px', height: '500px' }}>
        <iframe
          title="Cool Duck Video"
          src="https://www.youtube.com/embed/mQJ6q1ZCzsg"
          width="100%"
          height="100%"
        />
      </Frame>
    </>
  );
};

API Reference

Frame

The main component accepts these props:

Compound Components