Skip to main content

Sandpack React

React components that give you the power of editable sandboxes that run in the browser. Powered by Sandpack, the online bundler used by CodeSandbox.

import { Sandpack } from "@codesandbox/sandpack-react";
import "@codesandbox/sandpack-react/dist/index.css";

<Sandpack template="react" />;

Provider Classes

Interfaces

Components Variables

Other Variables

Presets Variables

Provider Variables

Theme Variables

Components Functions

Hooks Functions

Other Functions

Theme Functions

Type aliases

CodeEditorRef

Ƭ CodeEditorRef: CodeMirrorRef

Defined in

components/CodeEditor/index.tsx:16


EditorState

Ƭ EditorState: "pristine" | "dirty"

Defined in

types.ts:74


LoadingOverlayState

Ƭ LoadingOverlayState: "visible" | "fading" | "hidden" | "timeout"

Defined in

hooks/useLoadingOverlayState.ts:5


SandboxEnvironment

Ƭ SandboxEnvironment: "adonis" | "vue-cli" | "preact-cli" | "svelte" | "create-react-app-typescript" | "create-react-app" | "angular-cli" | "parcel" | "@dojo/cli-create-app" | "cxjs" | "gatsby" | "nuxt" | "next" | "reason" | "apollo" | "sapper" | "ember" | "nest" | "static" | "styleguidist" | "gridsome" | "vuepress" | "mdx-deck" | "quasar" | "docusaurus" | "node"

Defined in

types.ts:131


SandpackClientDispatch

Ƭ SandpackClientDispatch: (msg: SandpackMessage, clientId?: string) => void

Type declaration

▸ (msg, clientId?): void

Parameters
NameType
msgSandpackMessage
clientId?string
Returns

void

Defined in

types.ts:14


SandpackClientListen

Ƭ SandpackClientListen: (listener: ListenerFunction, clientId?: string) => UnsubscribeFunction

Type declaration

▸ (listener, clientId?): UnsubscribeFunction

Parameters
NameType
listenerListenerFunction
clientId?string
Returns

UnsubscribeFunction

Defined in

types.ts:19


SandpackContext

Ƭ SandpackContext: SandpackState & { dispatch: SandpackClientDispatch ; listen: SandpackClientListen }

Defined in

types.ts:24


SandpackFiles

Ƭ SandpackFiles: Record<string, string | SandpackFile>

Defined in

types.ts:92


SandpackInitMode

Ƭ SandpackInitMode: "immediate" | "lazy" | "user-visible"

immediate: It immediately mounts all components, such as the code-editor and the preview - this option might overload the memory usage and resource from the browser on a page with multiple instances;

lazy: Only initialize the components when the user is about to scroll them to the viewport and keep these components mounted until the user leaves the page - this is the default value;

user-visible: Only initialize the components when the user is about to scroll them to the viewport, but differently from lazy, this option unmounts those components once it's no longer in the viewport.

Defined in

types.ts:129


SandpackPartialTheme

Ƭ SandpackPartialTheme: DeepPartial<SandpackTheme>

Defined in

types.ts:231


SandpackPredefinedTemplate

Ƭ SandpackPredefinedTemplate: "angular" | "react" | "react-ts" | "vanilla" | "vanilla-ts" | "vue" | "vue3" | "svelte"

Defined in

types.ts:159


SandpackPredefinedTheme

Ƭ SandpackPredefinedTheme: "light" | "dark" | "sandpack-dark" | "night-owl" | "aqua-blue" | "github-light" | "monokai-pro"

Defined in

types.ts:169


SandpackStatus

Ƭ SandpackStatus: "initial" | "idle" | "running" | "timeout" | "done"

Defined in

types.ts:68


SandpackThemeProp

Ƭ SandpackThemeProp: SandpackPredefinedTheme | SandpackPartialTheme | "auto"

Defined in

types.ts:233


ViewportOrientation

Ƭ ViewportOrientation: "portrait" | "landscape"

Defined in

components/Preview/index.tsx:26


ViewportSize

Ƭ ViewportSize: ViewportSizePreset | "auto" | { height: number ; width: number }

Defined in

components/Preview/index.tsx:21


ViewportSizePreset

Ƭ ViewportSizePreset: "iPhone X" | "Pixel 2" | "iPad" | "Moto G4" | "Surface Duo"

Defined in

components/Preview/index.tsx:14

Components Variables

CodeEditor

CodeEditor: ForwardRefExoticComponent<CodeMirrorProps & RefAttributes<CodeMirrorRef>>

Defined in

components/CodeEditor/CodeMirror.tsx:95


LoadingOverlay

LoadingOverlay: React.FC<LoadingOverlayProps>

Defined in

common/LoadingOverlay.tsx:15


SandpackCodeEditor

SandpackCodeEditor: ForwardRefExoticComponent<CodeEditorProps & RefAttributes<CodeMirrorRef>>

Defined in

components/CodeEditor/index.tsx:58


SandpackCodeViewer

SandpackCodeViewer: ForwardRefExoticComponent<CodeViewerProps & RefAttributes<CodeMirrorRef>>

Defined in

components/CodeViewer/index.tsx:34


SandpackRunner

SandpackRunner: React.FC<SandpackRunnerProps>

Defined in

presets/SandpackRunner.tsx:30


SandpackStack

SandpackStack: React.FC<{ customStyle?: React.CSSProperties }>

Defined in

common/Stack.tsx:7


Other Variables

UnstyledOpenInCodeSandboxButton

UnstyledOpenInCodeSandboxButton: React.FC<React.HtmlHTMLAttributes<unknown>>

Defined in

common/OpenInCodeSandboxButton/UnstyledOpenInCodeSandboxButton.tsx:38


Presets Variables

Sandpack

Sandpack: React.FC<SandpackProps>

Defined in

presets/Sandpack.tsx:76


Provider Variables

SandpackConsumer

SandpackConsumer: Consumer<null | SandpackContext> = Sandpack.Consumer

Defined in

contexts/sandpackContext.tsx:728


SandpackReactContext

SandpackReactContext: Context<null | SandpackContext>

Defined in

contexts/sandpackContext.tsx:32


Theme Variables

SANDPACK_THEMES

SANDPACK_THEMES: Record<SandpackPredefinedTheme, SandpackTheme>

Defined in

themes/index.ts:269


SandpackLayout

SandpackLayout: React.FC<SandpackLayoutProps>

Defined in

common/Layout.tsx:15


SandpackThemeProvider

SandpackThemeProvider: React.FC<{ theme?: SandpackThemeProp }>

Defined in

contexts/themeContext.tsx:22


aquaBlueTheme

aquaBlueTheme: SandpackTheme

Defined in

themes/index.ts:121


defaultDark

defaultDark: SandpackTheme

Defined in

themes/index.ts:49


defaultLight

defaultLight: SandpackTheme

Defined in

themes/index.ts:13


githubLightTheme

githubLightTheme: SandpackTheme

Defined in

themes/index.ts:158


monokaiProTheme

monokaiProTheme: SandpackTheme

Defined in

themes/index.ts:233


nightOwlTheme

nightOwlTheme: SandpackTheme

Defined in

themes/index.ts:197


sandpackDark

sandpackDark: SandpackTheme

Defined in

themes/index.ts:85

Components Functions

ErrorOverlay

Const ErrorOverlay(): null | Element

Returns

null | Element

Defined in

common/ErrorOverlay.tsx:9


FileTabs

Const FileTabs(__namedParameters): Element

FileTabs is a list of all open files, the active file, and its state.

Parameters

NameType
__namedParametersFileTabsProps

Returns

Element

Defined in

components/FileTabs/index.tsx:23


Const Navigator(__namedParameters): Element

Parameters

NameType
__namedParametersNavigatorProps

Returns

Element

Defined in

components/Navigator/index.tsx:17


OpenInCodeSandboxButton

Const OpenInCodeSandboxButton(): null | Element

Returns

null | Element

Defined in

common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx:13


RefreshButton

Const RefreshButton(__namedParameters): Element

Parameters

NameType
__namedParametersRefreshButtonProps

Returns

Element

Defined in

components/Preview/RefreshButton.tsx:14


SandpackPreview

Const SandpackPreview(__namedParameters): Element

Parameters

NameType
__namedParametersPreviewProps

Returns

Element

Defined in

components/Preview/index.tsx:42


SandpackTranspiledCode

Const SandpackTranspiledCode(props): Element

Parameters

NameType
propsCodeViewerProps

Returns

Element

Defined in

components/TranspiledCode/index.tsx:14


Hooks Functions

useActiveCode

Const useActiveCode(): Object

This returns the current state of the active file and a method to update its content.

Returns

Object

NameType
codestring
readOnlyboolean
updateCode(newCode: string) => void

Defined in

hooks/useActiveCode.ts:9


useErrorMessage

Const useErrorMessage(): null | string

Returns

null | string

Defined in

hooks/useErrorMessage.ts:8


useLoadingOverlayState

Const useLoadingOverlayState(clientId?): LoadingOverlayState

Parameters

NameType
clientId?string

Returns

LoadingOverlayState

Defined in

hooks/useLoadingOverlayState.ts:13


useSandpack

useSandpack(): UseSandpackReturnType

Returns

UseSandpackReturnType

Defined in

hooks/useSandpack.ts:19


useSandpackNavigation

Const useSandpackNavigation(clientId?): Object

Parameters

NameType
clientId?string

Returns

Object

NameType
back() => void
forward() => void
refresh() => void

Defined in

hooks/useSandpackNavigation.ts:6


useSandpackTheme

Const useSandpackTheme(): Object

Returns

Object

NameType
themeSandpackTheme
themeIdstring

Defined in

hooks/useSandpackTheme.ts:9


useTranspiledCode

Const useTranspiledCode(): null | string

Returns

null | string

Defined in

hooks/useTranspiledCode.ts:18


Other Functions

BackwardIcon

Const BackwardIcon(): ReactElement<any, string | JSXElementConstructor<any>>

Returns

ReactElement<any, string | JSXElementConstructor<any>>

Defined in

icons/index.tsx:15


CSBIcon

Const CSBIcon(): ReactElement<any, string | JSXElementConstructor<any>>

Returns

ReactElement<any, string | JSXElementConstructor<any>>

Defined in

icons/index.tsx:71


CloseIcon

Const CloseIcon(): ReactElement<any, string | JSXElementConstructor<any>>

Returns

ReactElement<any, string | JSXElementConstructor<any>>

Defined in

icons/index.tsx:132


DirectoryIcon

Const DirectoryIcon(__namedParameters): ReactElement<any, string | JSXElementConstructor<any>>

Parameters

NameType
__namedParametersObject
__namedParameters.isOpen?boolean

Returns

ReactElement<any, string | JSXElementConstructor<any>>

Defined in

icons/index.tsx:95


FileIcon

Const FileIcon(): ReactElement<any, string | JSXElementConstructor<any>>

Returns

ReactElement<any, string | JSXElementConstructor<any>>

Defined in

icons/index.tsx:120


ForwardIcon

Const ForwardIcon(): ReactElement<any, string | JSXElementConstructor<any>>

Returns

ReactElement<any, string | JSXElementConstructor<any>>

Defined in

icons/index.tsx:27


FullScreenIcon

Const FullScreenIcon(): ReactElement<any, string | JSXElementConstructor<any>>

Returns

ReactElement<any, string | JSXElementConstructor<any>>

Defined in

icons/index.tsx:55


RefreshIcon

Const RefreshIcon(): ReactElement<any, string | JSXElementConstructor<any>>

Returns

ReactElement<any, string | JSXElementConstructor<any>>

Defined in

icons/index.tsx:39


RunIcon

Const RunIcon(): ReactElement<any, string | JSXElementConstructor<any>>

Returns

ReactElement<any, string | JSXElementConstructor<any>>

Defined in

icons/index.tsx:3


SandpackReactDevTools

Const SandpackReactDevTools(__namedParameters): null | Element

Parameters

NameType
__namedParameters{ clientId?: string ; theme?: DevToolsTheme } & HtmlHTMLAttributes<unknown>

Returns

null | Element

Defined in

components/ReactDevTools/index.tsx:10


Theme Functions

createThemeObject

Const createThemeObject(inputTheme?): Object

Parameters

NameType
inputTheme?SandpackThemeProp

Returns

Object

NameType
idstring
themeSandpackTheme

Defined in

themes/index.ts:282


getSyntaxStyle

Const getSyntaxStyle(token): SandpackSyntaxStyle

Parameters

NameType
tokenstring | SandpackSyntaxStyle

Returns

SandpackSyntaxStyle

Defined in

themes/index.ts:383


getThemeStyleSheet

Const getThemeStyleSheet(theme, themeId): string

Parameters

NameType
themeSandpackTheme
themeIdstring

Returns

string

Defined in

themes/index.ts:352