README
Playground
A simple live codeblock for HTML, CSS and Javascript built with ReactJS.
This repo is mostly clone from agney/playground repo. The difference is that it is not written in TypeScript but JavaScript.
You guys can learn more in his repo I've mentioned above.
Install
# via npm
npm install @nathan22x3/playground
# via yarn
yarn add @nathan22x3/playground
Usage
import Playground from "@nathan22x3/playground";
/* Why is there a tabs import? https://github.com/agneym/playground#why-is-there-a-reacttabs-import*/
import "@reach/tabs/styles.css";
const App = () => {
const snippet = {
markup: `<div id=app />`,
css: ``,
javascript: `import { h, Component, render } from 'preact';
import htm from 'htm';
const html = htm.bind(h);
const app = html\`<div>Hello World from Playground!</div>\`
render(app, document.getElementById('app'));`,
};
return (
<Playground
id="example"
initialSnippet={snippet}
defaultEditorTab="javascript"
transformJs
/>
);
};
API
props | description | default | required |
---|---|---|---|
id |
a unique identifier for the <iframe> |
true |
|
initialSnippet |
Initial code to be displayed | true |
|
defaultEditorTab |
Initial editor tab to be displyed. Possible values: "markup", "css", "javascript" | "markup" | false |
defaultResultTab |
Initial tab on result panel to be displayed. Possible values: "console", "result" | "result" | false |
transformJs |
Transform the JavaScript using Babel. This is required if you want bare module imports | false |
false |
presets |
Array of presets you want Babel to transform. This works only if transformJs is true. Eg. ["react", "es2015"] |
false |
|
theme |
Pass in the theme variables to customise the appearance | Learn more | false |
initialSnippet
prop
Format for {
markup: `<h1>Title</h1>`,
css: `h1 { color: red }`,
javascript: `console.log("this")`
}
Features
- Load preview for predefined code.
- Auto reloading preview.
- Allows bare ES package imports. This means you can add imports for any library that supports ES Module resolution and playground will automatically load it into your code.
- See console output in the component itself.
- Control the tab loaded by default for your use-case.