OPEN TECH FOUNDATION

React Sandbox

The CodeSandbox sandpack wrapper with additional features.

View Demo

• CodeSandbox
• Stackblitz (If preview is not working, try Open in New Tab button)

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

• @opentf/react-node-repl - The Node.js REPL in a React component.

• @opentf/react-state - A global state manager for React.

• @opentf/react-form - A simple form state manager for React.

• @opentf/std - An Extensive JavaScript Standard Library.

License

Copyright (c) Thanga Ganapathy (MIT License).