Docz IFrame Playground

The default Docz <Playground> is really cool, but it does not serve your components in an isolated browsing context. This means your components live in a shared document environment with the Docz theme

The disadvantages of shared browsing context are:

• It makes developers hard to test component responsiveness
• Possible CSS collisions between Docz default theme style and component style

This project aims to solve the issue by using <iframe>

Demo

Playground: https://zicodeng.github.io/docz-iframe-playground/

Installation

yarn add -D docz-iframe-playground

Usage

---
name: IFramePlayground
route: /
---

import { Playground, PropsTable } from 'docz';

import IFramePlayground from './../src/IFramePlayground';
import Header from './../helpers/Header';
import TestComponent from './TestComponent';

<Header />

## Demo

### You can nest `<IFramePlayground>` under `<Playground>`

<Playground>
  <TestComponent title="Not Using IFramePlayground" />
  <IFramePlayground style={{ marginTop: 50 }}>
    <TestComponent title="Using IFramePlayground" />
  </IFramePlayground>
</Playground>

### You can also use standalone `<IFramePlayground>`

Make sure to turn on `enableResizing`

<IFramePlayground enableResizing maxHeight={800}>
  <TestComponent title="Using IFramePlayground" height="100%" />
</IFramePlayground>

## API

<PropsTable of={IFramePlayground} />