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:110
ErrorOverlay
• Const
ErrorOverlay: React.FC
<React.DOMAttributes
<HTMLDivElement
> & { children?
: React.ReactNode
}>
Defined in
sandpack-react/src/components/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/components/common/Layout.tsx:68
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/components/common/Stack.tsx:26
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/components/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/components/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/components/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/components/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
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
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:500
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:505
SandpackContext
Ƭ SandpackContext: SandpackState
& { dispatch
: SandpackClientDispatch
; listen
: SandpackClientListen
}
Defined in
sandpack-react/src/types.ts:510
DirectoryIconClosed
▸ DirectoryIconClosed(): ReactElement
<any
, string
| JSXElementConstructor
<any
>>
Returns
ReactElement
<any
, string
| JSXElementConstructor
<any
>>
Defined in
sandpack-react/src/components/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:746
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:223
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:263
SandpackPredefinedTemplate
Ƭ SandpackPredefinedTemplate: keyof typeof SANDBOX_TEMPLATES
Defined in
sandpack-react/src/types.ts:236
Theme
SandpackPredefinedTheme
Ƭ SandpackPredefinedTheme: "light"
| "dark"
| "auto"
Defined in
sandpack-react/src/types.ts:277
SandpackThemeProp
Ƭ SandpackThemeProp: SandpackPredefinedTheme
| DeepPartial
<SandpackTheme
>
Defined in
sandpack-react/src/types.ts:348
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/styles/themeContext.tsx:52
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