Payload Iframe Tabs Plugin

A plugin that easily allows you add iframes into separate tabs in the admin panel.

Installation

  yarn add @nouance/payload-iframe-tabs-plugin
  # OR
  npm i @nouance/payload-iframe-tabs-plugin

Features

Src
Code
Dynamic

Supported tabs

Currently usage is the same for globals and collections as well.

Basic usage:

import iframeTabsPlugin from '@nouance/payload-iframe-tabs-plugin'

// ...

iframeTabsPlugin({
  enabled: true,
  collections: [
    {
      slug: 'examples',
      tabs: [
        {
          name: 'FirstYoutube',
          label: 'Michael Scott',
          path: '/michael-scott',
          src: 'https://www.youtube.com/embed/B9MNITrHu9E',
        },
      ],
    },
  ],
  globals: [
    {
      slug: 'Homepage',
      tabs: [
        {
          name: 'Spongebob',
          label: 'Spongebob',
          path: '/spongebob',
          src: 'https://www.youtube.com/embed/hzond0fF4MM',
          iframeProps: {
            height: 1080,
            width: 1920,
            frameBorder: '0',
            style: { aspectRatio: '19/10', maxWidth: '100%', height: 'auto' },
          },
        },
      ],
    },
  ],
}),

Base config

This config is required for all tabs.

name | required | A machine name used for the tab, it must be unique and preferably written in PascalCase
label | required
path | required | A unique path that dictates what URL this tab will be available in

Src

In src mode, you only need to provide the right link for the iframe to render its content. You can then pass an additional iframeProps to style and configure your iframe element.

src | required | Full URL to embeddable content
iframeProps | optional | HTML props for the Iframe element

globals: [
  {
    slug: 'Homepage',
    tabs: [
      {
        name: 'Spongebob',
        label: 'Spongebob',
        path: '/spongebob',
        src: 'https://www.youtube.com/embed/hzond0fF4MM',
        iframeProps: {
          height: 1080,
          width: 1920,
          frameBorder: '0',
          style: { aspectRatio: '19/10', maxWidth: '100%', height: 'auto' },
        },
      },
    ],
  },
],

Code

By providing code instead we will dangerously render any code you provide here.
Use with caution.

code | required | Full markup in string format to dangerously render

{
  name: 'FigmaDesign',
  label: 'Figma Design',
  path: '/design',
  code: `<iframe style="border: 1px solid rgba(0, 0, 0, 0.1); width: 100%; height: auto; aspect-ratio: 19/10;" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=----------" allowfullscreen></iframe>`,
},

Dynamic

Dynamic mode is similar to src mode except that we can fetch your URL from a field value instead.

watchField | required | Field path to watch for updates
iframeProps | optional | HTML props for the Iframe element

{
  name: 'Dynamic',
  label: 'Dynamic',
  path: '/dynamic',
  watchField: 'source',
  iframeProps: {
    height: 1080,
    width: 1920,
    frameBorder: '0',
    style: { aspectRatio: '19/10', maxWidth: '100%', height: 'auto' },
  },
},

Contributing

For development purposes, there is a full working example of how this plugin might be used in the dev directory of this repo.

git clone git@github.com:NouanceLabs/payload-iframe-tabs-plugin.git \
  cd payload-iframe-tabs-plugin && yarn \
  cd dev && yarn \
  cp .env.example .env \
  vim .env \ # add your payload details
  yarn dev