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

• CodeEditorProps
• CodeViewerProps
• CustomLanguage
• FileTabsProps
• LoadingOverlayProps
• NavigatorProps
• PreviewProps
• SandpackFile
• SandpackFileExplorerProp
• SandpackLayoutProps
• SandpackOptions
• SandpackPreviewRef
• SandpackProps
• SandpackSetup
• SandpackState
• SandpackTheme
• UseSandpack

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

Name	Type
__namedParameters	FileTabsProps & HTMLAttributes<HTMLDivElement>

Returns

Element

Defined in

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

---

LoadingOverlay

▸ LoadingOverlay(__namedParameters): null | Element

Parameters

Name	Type
__namedParameters	LoadingOverlayProps & HTMLAttributes<HTMLDivElement>

Returns

null | Element

Defined in

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

---

Navigator

▸ Navigator(__namedParameters): Element

Parameters

Name	Type
__namedParameters	NavigatorProps & 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

Name	Type
__namedParameters	RefreshButtonProps

Returns

Element

Defined in

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

---

RunButton

▸ RunButton(__namedParameters): null | Element

Parameters

Name	Type
__namedParameters	HTMLAttributes<HTMLButtonElement>

Returns

null | Element

Defined in

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

---

SandpackFileExplorer

▸ SandpackFileExplorer(__namedParameters): null | Element

Parameters

Name	Type
__namedParameters	SandpackFileExplorerProp & HTMLAttributes<HTMLDivElement>

Returns

null | Element

Defined in

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

---

SandpackReactDevTools

▸ SandpackReactDevTools(__namedParameters): null | Element

Parameters

Name	Type
__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

Name	Type
__namedParameters	CodeViewerProps & 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

Name	Type
code	string
readOnly	boolean
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

Name	Type
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

Name	Type
props?	Object
props.clientId?	string
props.maxMessageCount?	number
props.showSyntaxError?	boolean

Returns

Object

Name	Type
logs	SandpackConsoleData
reset	() => void

Defined in

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

---

useSandpackNavigation

▸ useSandpackNavigation(clientId?): Object

Parameters

Name	Type
clientId?	string

Returns

Object

Name	Type
back	() => void
forward	() => void
refresh	() => void

Defined in

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

---

useSandpackTheme

▸ useSandpackTheme(): Object

Returns

Object

Name	Type
theme	SandpackTheme
themeId	string
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

Name	Type
msg	SandpackMessage
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

Name	Type
listener	ListenerFunction
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