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