react-playground-iframe v0.2.5

react-playground-iframe

Rendering the react component to the <iframe/>

Demo (Yet Develop)

Installation

yarn add react-playground-iframe

npm install react-playground-iframe --save

Quick Start

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>
  );
}

Instead Grammar

Playground does not support import grammar. And If such as - is included, it must be replaced with _.

The following should be used:

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

API

<IFrame /> Props

<CodeEditor /> Props

<IFrameProvider />

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>
}