Skip to content

Open-Tech-Foundation/react-sandbox

Repository files navigation

 OPEN TECH FOUNDATION

React Sandbox

Demo gif

The CodeSandbox sandpack wrapper with additional features.

View Demo

Features

  • Multiple Layouts (Tabs, Code+Console, etc)
  • Choose between console types: Basic or Advanced(console-feed)

Installation

npm install @opentf/react-sandbox
yarn add @opentf/react-sandbox
pnpm add @opentf/react-sandbox
bun add @opentf/react-sandbox

Usage

import { SandBox } from '@opentf/react-sandbox';

export default function App() {
  const code = `export default function App() {
    return <h1>Hello world</h1>
  }`;

  return <SandBox code={code} />;
}

Props

Name Type Required Default Description
code string Yes '' Template specific default file content
Eg: nextjs -> pages/index.js
template string No 'react' The codesandbox template.
theme SandpackThemeProp No 'auto' The codesandbox theme.
layout string No 'Default' Currently, there are three presets available:
1. Default
2.Tabs
3. Code_Console
deps string[] No [] The npm dependencies.
eg: ['lodash', '[email protected]'].
files Record<string, string> No {} The files prop accepts an object, where each key is the relative path of that file in the sandbox folder structure.
cdns string[] No [] Any third party external dependencies, eg: ['https://cdn.tailwindcss.com']
tabIndex number No 0 The tab index to select in the Tabs layout
consoleType string No 'Basic' There are two types, Basic and Advanced.
It uses console-feed for 'Advanced'

Related

License

Copyright (c) Thanga Ganapathy (MIT License).