import React,{useState} from 'react';
import {CodeEditor,IFrameProvider,IFrame} from 'react-playground-iframe';
 
function App() {
  const InitCode = `const {Button} = antd;
    function App()
    {
      const [idx,SetIdx] = React.useState(0);
      return (
        <div>
          <Button type="primary" onClick={()=> SetIdx(idx+1)}>{idx}</Button>
        </div>
      )
    }`;
  return (
    <div>
      <IFrameProvider>
        <CodeEditor InitCode={InitCode}  />
        <IFrame InitCode={InitCode} LoadModule={['antd']} LoadCSS={['https://unpkg.com/antd@4.2.5/dist/antd.css']} />
        </IFrameProvider>
    </div>
  );
}

import {useState,useEffect} = 'react';
import {IFrame} = 'react-playground-iframe';
import {Button} = 'antd';
//  ↓↓↓↓↓↓↓↓
const {useState,useEffect} = React;
const {IFrame} = react_playground_iframe;
const {Button} = antd;

import React, { useContext, useEffect } from 'react';
import { IFrameContext } from 'react-playground-iframe';
 
function IFrameEvent()
{
  const IframeData = useContext(IFrameContext);
  useEffect(() => {
    switch(IframeData.state)
    {
      case 'load_start':
      console.log('load_start message when <IFrame /> LoadModule Prop is added');
      break;
      case 'load_end':
      console.log('load_end message when <IFrame /> LoadModule Prop Load is ended');
      break;
      case 'load_error':
      console.log('<IFrame /> LoadModule Prop Callup Failed');
      break;
    }
  }, [IframeData.state]);
}
 
render() {
  <IFrameProvider>
   {/*--- IFrame Component ---*/}
   {/*--- CodeEditor Component ---*/}
   <IFrameEvent />
  </IFrameProvider>
}