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

Name	Type	Description
InitCode	string	First Render React Code in the playground.
LoadModule	string[]	Import the NPM Module used in the playground.
LoadCSS	string[]	Import the href used in the playground. <= <link rel="stylesheet" href=" ">

<CodeEditor /> Props

Name	Type	Description
InitCode	string	First Render React Code in the <textarea />

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