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
- FileTabsProps
- LoadingOverlayProps
- NavigatorProps
- PreviewProps
- SandpackFile
- SandpackLayoutProps
- SandpackOptions
- SandpackPreviewRef
- SandpackProps
- SandpackSetup
- 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:73
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:66
SandpackPreview
• Const
SandpackPreview: ForwardRefExoticComponent
<PreviewProps
& HTMLAttributes
<HTMLDivElement
> & RefAttributes
<SandpackPreviewRef
>>
Defined in
sandpack-react/src/components/Preview/index.tsx:82
SandpackStack
• Const
SandpackStack: React.FC
<React.HTMLAttributes
<HTMLDivElement
> & { children?
: React.ReactNode
}>
Defined in
sandpack-react/src/common/Stack.tsx:20
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:67
LoadingOverlay
▸ LoadingOverlay(__namedParameters
): null
| Element
Parameters
Name | Type |
---|---|
__namedParameters | LoadingOverlayProps & HTMLAttributes <HTMLDivElement > |
Returns
null
| Element
Defined in
sandpack-react/src/common/LoadingOverlay.tsx:38
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 | HTMLAttributes <HTMLDivElement > |
Returns
null
| Element
Defined in
sandpack-react/src/components/FileExplorer/index.tsx:18
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:20
SandpackTranspiledCode
▸ SandpackTranspiledCode(__namedParameters
): Element
Parameters
Name | Type |
---|---|
__namedParameters | CodeViewerProps & HTMLAttributes <HTMLDivElement > |
Returns
Element
Defined in
sandpack-react/src/components/TranspiledCode/index.tsx:26
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
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 |
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
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:677
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:202
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:251
SandpackPredefinedTemplate
Ƭ SandpackPredefinedTemplate: "angular"
| "react"
| "react-ts"
| "vanilla"
| "vanilla-ts"
| "vue"
| "vue3"
| "svelte"
| "solid"
Defined in
sandpack-react/src/types.ts:215
Template
ANGULAR_TEMPLATE
• Const
ANGULAR_TEMPLATE: Object
Type declaration
Name | Type |
---|---|
dependencies | { @angular/common : string = "^11.2.0"; @angular/compiler : string = "^11.2.0"; @angular/core : string = "^11.2.0"; @angular/platform-browser : string = "^11.2.0"; @angular/platform-browser-dynamic : string = "^11.2.0"; core-js : string = "3.8.3"; rxjs : string = "6.6.3"; zone.js : string = "0.11.3" } |
[email protected]/common | string |
[email protected]/compiler | string |
[email protected]/core | string |
[email protected]/platform-browser | string |
[email protected]/platform-browser-dynamic | string |
dependencies.core-js | string |
dependencies.rxjs | string |
dependencies.zone.js | string |
entry | string |
environment | string |
files | { /src/app/app.component.css : { code : string } ; /src/app/app.component.html : { code : string } ; /src/app/app.component.ts : { code : string } ; /src/app/app.module.ts : { code : string } ; /src/index.html : { code : string } ; /src/main.ts : { code : string } ; /src/polyfills.ts : { code : string } } |
files./src/app/app.component.css | { code : string } |
files./src/app/app.component.css.code | string |
files./src/app/app.component.html | { code : string } |
files./src/app/app.component.html.code | string |
files./src/app/app.component.ts | { code : string } |
files./src/app/app.component.ts.code | string |
files./src/app/app.module.ts | { code : string } |
files./src/app/app.module.ts.code | string |
files./src/index.html | { code : string } |
files./src/index.html.code | string |
files./src/main.ts | { code : string } |
files./src/main.ts.code | string |
files./src/polyfills.ts | { code : string } |
files./src/polyfills.ts.code | string |
main | string |
Defined in
sandpack-react/src/templates/angular.ts:4
REACT_TEMPLATE
• Const
REACT_TEMPLATE: Object
Type declaration
Name | Type |
---|---|
dependencies | { react : string = "^18.0.0"; react-dom : string = "^18.0.0"; react-scripts : string = "^4.0.0" } |
dependencies.react | string |
dependencies.react-dom | string |
dependencies.react-scripts | string |
entry | string |
environment | string |
files | { /App.js : { code : string } ; /index.js : { code : string } ; /public/index.html : { code : string } ; /styles.css : { code : string } } |
files./App.js | { code : string } |
files./App.js.code | string |
files./index.js | { code : string } |
files./index.js.code | string |
files./public/index.html | { code : string } |
files./public/index.html.code | string |
files./styles.css | { code : string } |
files./styles.css.code | string |
main | string |
Defined in
sandpack-react/src/templates/react.ts:4
REACT_TYPESCRIPT_TEMPLATE
• Const
REACT_TYPESCRIPT_TEMPLATE: Object
Type declaration
Name | Type |
---|---|
dependencies | { react : string = "^18.0.0"; react-dom : string = "^18.0.0"; react-scripts : string = "^4.0.0" } |
dependencies.react | string |
dependencies.react-dom | string |
dependencies.react-scripts | string |
devDependencies | { @types/react : string = "^18.0.0"; @types/react-dom : string = "^18.0.0"; typescript : string = "^4.0.0" } |
[email protected]/react | string |
[email protected]/react-dom | string |
devDependencies.typescript | string |
entry | string |
environment | string |
files | { /App.tsx : { code : string } ; /index.tsx : { code : string } ; /public/index.html : { code : string } ; /styles.css : { code : string } ; tsconfig.json : { code : string } } |
files./App.tsx | { code : string } |
files./App.tsx.code | string |
files./index.tsx | { code : string } |
files./index.tsx.code | string |
files./public/index.html | { code : string } |
files./public/index.html.code | string |
files./styles.css | { code : string } |
files./styles.css.code | string |
files.tsconfig.json | { code : string } |
files.tsconfig.json.code | string |
main | string |
Defined in
sandpack-react/src/templates/react-typescript.ts:4
SOLID_TEMPLATE
• Const
SOLID_TEMPLATE: Object
Type declaration
Name | Type |
---|---|
dependencies | { solid-js : string = "1.3.15" } |
dependencies.solid-js | string |
entry | string |
environment | string |
files | { /App.tsx : { code : string } ; /index.html : { code : string } ; /index.tsx : { code : string } ; /styles.css : { code : string } } |
files./App.tsx | { code : string } |
files./App.tsx.code | string |
files./index.html | { code : string } |
files./index.html.code | string |
files./index.tsx | { code : string } |
files./index.tsx.code | string |
files./styles.css | { code : string } |
files./styles.css.code | string |
main | string |
Defined in
sandpack-react/src/templates/solid.ts:4
SVELTE_TEMPLATE
• Const
SVELTE_TEMPLATE: Object
Type declaration
Name | Type |
---|---|
dependencies | { svelte : string = "^3.0.0" } |
dependencies.svelte | string |
entry | string |
environment | string |
files | { /App.svelte : { code : string } ; /index.js : { code : string } ; /public/index.html : { code : string } } |
files./App.svelte | { code : string } |
files./App.svelte.code | string |
files./index.js | { code : string } |
files./index.js.code | string |
files./public/index.html | { code : string } |
files./public/index.html.code | string |
main | string |
Defined in
sandpack-react/src/templates/svelte.ts:4
VANILLA_TEMPLATE
• Const
VANILLA_TEMPLATE: Object
Type declaration
Name | Type |
---|---|
dependencies | {} |
entry | string |
environment | string |
files | { /index.html : { code : string } ; /src/index.js : { code : string } ; /src/styles.css : { code : string } } |
files./index.html | { code : string } |
files./index.html.code | string |
files./src/index.js | { code : string } |
files./src/index.js.code | string |
files./src/styles.css | { code : string } |
files./src/styles.css.code | string |
main | string |
Defined in
sandpack-react/src/templates/vanilla.ts:4
VANILLA_TYPESCRIPT_TEMPLATE
• Const
VANILLA_TYPESCRIPT_TEMPLATE: Object
Type declaration
Name | Type |
---|---|
dependencies | {} |
devDependencies | { typescript : string = "^4.0.0" } |
devDependencies.typescript | string |
entry | string |
environment | string |
files | { /index.html : { code : string } ; /src/index.ts : { code : string } ; /src/styles.css : { code : string } ; tsconfig.json : { code : string } } |
files./index.html | { code : string } |
files./index.html.code | string |
files./src/index.ts | { code : string } |
files./src/index.ts.code | string |
files./src/styles.css | { code : string } |
files./src/styles.css.code | string |
files.tsconfig.json | { code : string } |
files.tsconfig.json.code | string |
main | string |
Defined in
sandpack-react/src/templates/vanilla-typescript.ts:4
VUE_TEMPLATE
• Const
VUE_TEMPLATE: Object
Type declaration
Name | Type |
---|---|
dependencies | { @vue/cli-plugin-babel : string = "4.1.1"; vue : string = "^2.6.11" } |
[email protected]/cli-plugin-babel | string |
dependencies.vue | string |
entry | string |
environment | string |
files | { /public/index.html : { code : string } ; /src/App.vue : { code : string } ; /src/main.js : { code : string } } |
files./public/index.html | { code : string } |
files./public/index.html.code | string |
files./src/App.vue | { code : string } |
files./src/App.vue.code | string |
files./src/main.js | { code : string } |
files./src/main.js.code | string |
main | string |
Defined in
sandpack-react/src/templates/vue.ts:4
VUE_TEMPLATE_3
• Const
VUE_TEMPLATE_3: Object
Type declaration
Name | Type |
---|---|
dependencies | { @vue/cli-plugin-babel : string = "4.5.0"; core-js : string = "^3.6.5"; vue : string = "^3.0.0-0" } |
[email protected]/cli-plugin-babel | string |
dependencies.core-js | string |
dependencies.vue | string |
entry | string |
environment | string |
files | { /public/index.html : { code : string } ; /src/App.vue : { code : string } ; /src/main.js : { code : string } } |
files./public/index.html | { code : string } |
files./public/index.html.code | string |
files./src/App.vue | { code : string } |
files./src/App.vue.code | string |
files./src/main.js | { code : string } |
files./src/main.js.code | string |
main | string |
Defined in
sandpack-react/src/templates/vue3.ts:4
Theme
SandpackPredefinedTheme
Ƭ SandpackPredefinedTheme: "light"
| "dark"
| "auto"
Defined in
sandpack-react/src/types.ts:256
SandpackThemeProp
Ƭ SandpackThemeProp: SandpackPredefinedTheme
| DeepPartial
<SandpackTheme
>
Defined in
sandpack-react/src/types.ts:327
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:47
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