C15T Logo

Frame

Conditionally render children based on consent, with a placeholder for when consent is not given.

Canary Feature

This feature is available in canary releases and may have breaking changes. Use with caution in production. Report issues on GitHub

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:

Property
Types

Compound Components

Property
Types