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";

<Sandpack template="react" />;

Interfaces

Components

CodeEditorRef

Ƭ CodeEditorRef: CodeMirrorRef

Defined in

sandpack-react/src/components/CodeEditor/index.tsx:22


CodeEditor

Const CodeEditor: ForwardRefExoticComponent<CodeMirrorProps & RefAttributes<CodeMirrorRef>>

Defined in

sandpack-react/src/components/CodeEditor/CodeMirror.tsx:111


ErrorOverlay

Const ErrorOverlay: React.FC<React.DOMAttributes<HTMLDivElement> & { children?: React.ReactNode }>

Defined in

sandpack-react/src/common/ErrorOverlay.tsx:16


SandpackCodeEditor

Const SandpackCodeEditor: ForwardRefExoticComponent<CodeEditorProps & RefAttributes<CodeMirrorRef>>

Defined in

sandpack-react/src/components/CodeEditor/index.tsx:79


SandpackCodeViewer

Const SandpackCodeViewer: ForwardRefExoticComponent<CodeViewerProps & RefAttributes<CodeMirrorRef>>

Defined in

sandpack-react/src/components/CodeViewer/index.tsx:41


SandpackLayout

Const SandpackLayout: ForwardRefExoticComponent<SandpackLayoutProps & RefAttributes<HTMLDivElement>>

Defined in

sandpack-react/src/common/Layout.tsx:61


SandpackPreview

Const SandpackPreview: ForwardRefExoticComponent<PreviewProps & HTMLAttributes<HTMLDivElement> & RefAttributes<SandpackPreviewRef>>

Defined in

sandpack-react/src/components/Preview/index.tsx:81


SandpackStack

Const SandpackStack: React.FC<React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }>

Defined in

sandpack-react/src/common/Stack.tsx:27


SandpackTests

Const SandpackTests: React.FC<{ actionsChildren?: JSX.Element ; verbose?: boolean ; watchMode?: boolean ; onComplete?: (specs: Record<string, Spec>) => void } & React.HtmlHTMLAttributes<HTMLDivElement>>

Defined in

sandpack-react/src/components/Tests/SandpackTests.tsx:58


UnstyledOpenInCodeSandboxButton

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

Defined in

sandpack-react/src/common/OpenInCodeSandboxButton/UnstyledOpenInCodeSandboxButton.tsx:49


FileTabs

FileTabs(__namedParameters): Element

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

Parameters

NameType
__namedParametersFileTabsProps & HTMLAttributes<HTMLDivElement>

Returns

Element

Defined in

sandpack-react/src/components/FileTabs/index.tsx:73


LoadingOverlay

LoadingOverlay(__namedParameters): null | Element

Parameters

NameType
__namedParametersLoadingOverlayProps & HTMLAttributes<HTMLDivElement>

Returns

null | Element

Defined in

sandpack-react/src/common/LoadingOverlay.tsx:40


Navigator(__namedParameters): Element

Parameters

NameType
__namedParametersNavigatorProps & HTMLAttributes<HTMLDivElement>

Returns

Element

Defined in

sandpack-react/src/components/Navigator/index.tsx:59


OpenInCodeSandboxButton

OpenInCodeSandboxButton(): null | Element

Returns

null | Element

Defined in

sandpack-react/src/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx:18


RefreshButton

RefreshButton(__namedParameters): Element

Parameters

NameType
__namedParametersRefreshButtonProps

Returns

Element

Defined in

sandpack-react/src/components/Preview/RefreshButton.tsx:21


RunButton

RunButton(__namedParameters): null | Element

Parameters

NameType
__namedParametersHTMLAttributes<HTMLButtonElement>

Returns

null | Element

Defined in

sandpack-react/src/common/RunButton.tsx:20


SandpackFileExplorer

SandpackFileExplorer(__namedParameters): null | Element

Parameters

NameType
__namedParametersSandpackFileExplorerProp & HTMLAttributes<HTMLDivElement>

Returns

null | Element

Defined in

sandpack-react/src/components/FileExplorer/index.tsx:29


SandpackReactDevTools

SandpackReactDevTools(__namedParameters): null | Element

Parameters

NameType
__namedParameters{ clientId?: string ; theme?: DevToolsTheme } & HTMLAttributes<HTMLDivElement>

Returns

null | Element

Defined in

sandpack-react/src/components/ReactDevTools/index.tsx:19


SandpackTranspiledCode

SandpackTranspiledCode(__namedParameters): Element

Parameters

NameType
__namedParametersCodeViewerProps & HTMLAttributes<HTMLDivElement>

Returns

Element

Defined in

sandpack-react/src/components/TranspiledCode/index.tsx:27

Components

`SandpackConsole` is a Sandpack devtool that allows printing the console logs from a Sandpack client. It is designed to be a light version of a browser console, which means that it's limited to a set of common use cases you may encounter when coding.

SandpackConsole

Const SandpackConsole: React.FC<React.HTMLAttributes<HTMLDivElement> & SandpackConsoleProps>

Defined in

sandpack-react/src/components/Console/SandpackConsole.tsx:31

Hooks

useActiveCode

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

sandpack-react/src/hooks/useActiveCode.ts:9


useErrorMessage

useErrorMessage(): null | string

Returns

null | string

Defined in

sandpack-react/src/hooks/useErrorMessage.ts:8


useLoadingOverlayState

useLoadingOverlayState(clientId?, externalLoading?): LoadingOverlayState

Parameters

NameType
clientId?string
externalLoading?boolean

Returns

LoadingOverlayState

Defined in

sandpack-react/src/hooks/useLoadingOverlayState.ts:23


useSandpack

useSandpack(): UseSandpack

Returns

UseSandpack

Defined in

sandpack-react/src/hooks/useSandpack.ts:22


useSandpackClient

useSandpackClient(): UseSandpackClient

It registers a new sandpack client and returns its instance, listeners, and dispatch function. Using it when creating a custom component to interact directly with the client is recommended. For other cases, use useSandpack instead.

Returns

UseSandpackClient

Defined in

sandpack-react/src/hooks/useSandpackClient.ts:31


useSandpackConsole

useSandpackConsole(props?): Object

It provides an interface to consume the logs from a sandpack client.

Parameters

NameType
props?Object
props.clientId?string
props.maxMessageCount?number
props.showSyntaxError?boolean

Returns

Object

NameType
logsSandpackConsoleData
reset() => void

Defined in

sandpack-react/src/components/Console/useSandpackConsole.ts:17


useSandpackNavigation

useSandpackNavigation(clientId?): Object

Parameters

NameType
clientId?string

Returns

Object

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

Defined in

sandpack-react/src/hooks/useSandpackNavigation.ts:6


useSandpackTheme

useSandpackTheme(): Object

Returns

Object

NameType
themeSandpackTheme
themeIdstring
themeMode"dark" | "light"

Defined in

sandpack-react/src/hooks/useSandpackTheme.ts:9


useTranspiledCode

useTranspiledCode(): null | string

Returns

null | string

Defined in

sandpack-react/src/hooks/useTranspiledCode.ts:18

Other

SandpackClientDispatch

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

Type declaration

▸ (msg, clientId?): void

Parameters
NameType
msgSandpackMessage
clientId?string
Returns

void

Defined in

sandpack-react/src/types.ts:508


SandpackClientListen

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

Type declaration

▸ (listener, clientId?): UnsubscribeFunction

Parameters
NameType
listenerListenerFunction
clientId?string
Returns

UnsubscribeFunction

Defined in

sandpack-react/src/types.ts:513


SandpackContext

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

Defined in

sandpack-react/src/types.ts:518


DirectoryIconClosed

DirectoryIconClosed(): ReactElement<any, string | JSXElementConstructor<any>>

Returns

ReactElement<any, string | JSXElementConstructor<any>>

Defined in

sandpack-react/src/icons/index.tsx:106


getSandpackCssText

getSandpackCssText(): string

Returns

string

Defined in

node_modules/@stitches/core/types/stitches.d.ts:132

Provider

SandpackConsumer

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

Defined in

sandpack-react/src/contexts/sandpackContext.tsx:723


SandpackReactContext

Const SandpackReactContext: Context<null | SandpackContext>

Defined in

sandpack-react/src/contexts/sandpackContext.tsx:33

Setup

SandboxEnvironment

Ƭ SandboxEnvironment: "angular-cli" | "create-react-app" | "create-react-app-typescript" | "svelte" | "parcel" | "vue-cli" | "static" | "solid"

Defined in

sandpack-react/src/types.ts:222


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

sandpack-react/src/types.ts:272


SandpackPredefinedTemplate

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

Defined in

sandpack-react/src/types.ts:235

Theme

SandpackPredefinedTheme

Ƭ SandpackPredefinedTheme: "light" | "dark" | "auto"

Defined in

sandpack-react/src/types.ts:286


SandpackThemeProp

Ƭ SandpackThemeProp: SandpackPredefinedTheme | DeepPartial<SandpackTheme>

Defined in

sandpack-react/src/types.ts:357


SANDPACK_THEMES

Const SANDPACK_THEMES: Record<SandpackPredefinedTheme, SandpackTheme>

Defined in

sandpack-react/src/themes/index.ts:84


SandpackThemeProvider

Const SandpackThemeProvider: React.FC<React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode ; theme?: SandpackThemeProp }>

Defined in

sandpack-react/src/contexts/themeContext.tsx:56


defaultDark

Const defaultDark: SandpackTheme

Defined in

sandpack-react/src/themes/index.ts:45


defaultLight

Const defaultLight: SandpackTheme

Defined in

sandpack-react/src/themes/index.ts:6