@sandpack-monaco/react

Headless editor for React

Install

yarn add @sandpack-monaco/react

useage

import React from 'react'
import { Sandpack, PresetLayout } from '@sandpack-monaco/react'
import '@sandpack-monaco/react/dist/index.css'

const Editor = () => {
  return (
    <Sandpack
      customSetup={{
        files: {
          'index.js': 'export {}',
        },
      }}
    >
      <PresetLayout />
    </Sandpack>
  )
}

API Reference

Sandpack

this is a provider set of an editor instance, wrap this component in your App. Every hook from @sandpack-monaco/react should call under this Component.

import React from 'react'
import { Sandpack } from '@sandpack-monaco/react'
import '@sandpack-monaco/react/dist/index.css'

const Root = () => {
  return (
    <Sandpack
      customSetup={{
        files: {
          'index.js': 'export {}',
        },
      }}
    >
      <App />
    </Sandpack>
  )
}

SandpackProps

type SandpackProps = {
  customSetup: {
    files?: SandpackFiles
  }
  activePath: string
  openPaths: string[]
  theme?: SandpackThemeProp | undefined
}

type SandpackFiles = Record<string, SandpackFile>

interface SandpackFile<T = never> {
  code: string
  /**
   * any data you host in file
   */
  data?: T
  readonly?: boolean
}

useSandpack

React hooks that return all files relative api.

function useSandpack(): {
  openPaths: string[]
  activePath: string
  history: string[]
  files: SandpackFiles
  updateFile: (path: string, updateObj: Partial<SandpackFile>) => void
  updateCurrentFile: (updateObj: Partial<SandpackFile>) => void
  openFile: (path: string) => void
  closeFile: (path: string) => void
  updateFileState: (path: string, state: SandpackFile['state']) => void
  setActiveFile: (path: string) => void
  reopenClosedFile: () => void
}

useActiveCode

React hook that return active code. Alias of const { code, updateCode } = useSandpack().

function useActiveCode(): {
  code: string
  updateCode: (newCode: string) => void
}

useActiveFile

React hook that return active file. Alias of const { path, file, updateFile } = useSandpack().

function useActiveFile(): {
  path: string
  file: SandpackFile
  updateFile: (updateObj: Partial<SandpackFile>) => void
}

useHistory

React hook that return the file history stack. Alias of const { history } = useSandpack().

function useHistory(): string[]

useSanpackAction

Use for custom editor action, which can register both context-menu action and monaco-eidtor action.

function useSandpackAction(desc?: ISpandpackActionDescriptor | undefined): void

type ISpandpackActionDescriptor = Omit<
  Editor.IActionDescriptor,
  'contextMenuGroupId' | 'contextMenuOrder' | 'run'
> &
  IExtraActionOptions

example

This example implements an action for reopening a file.

import { useMemo, useRef } from 'react'
import { KeyCode, KeyMod } from 'monaco-editor/esm/vs/editor/editor.api'
import {
  useSandpack,
  ISpandpackActionDescriptor,
  useSandpackAction,
} from '@sandpack-monaco/react'

export const useReopenClosedFileAction = () => {
  const { reopenClosedFile } = useSandpack()
  const ref = useRef(reopenClosedFile)
  ref.current = reopenClosedFile

  const descriptor = useMemo<ISpandpackActionDescriptor>(
    () => ({
      id: 'view:reopen-closed-editor',
      label: 'View: Reopen Closed Editor',
      keybindings: [KeyMod.Shift | KeyMod.Alt | KeyCode.KeyT],
      run: () => {
        ref.current()
      },
    }),
    [],
  )
  useSandpackAction(descriptor)
}

useSandpackContextMenu

Use for custom contextMenu, return an useContextMenuTrigger hook.

useSandpackTheme

return the theme Object from Sandpack.

function useSandpackTheme(): {
  theme: SandpackTheme
  themeId: string
}

useEditorInstance

React hook that return the monaco-editor instance.

function useEdtiorInstance(): {
  editor: editor.IStandaloneCodeEditor | null
  setEditor: (editor: editor.IStandaloneCodeEditor) => void
}

useMonaco

return the monaco instance, reexport from @monaco-editor/react

function useMonaco(): typeof monaco

loader

return the @monaco-editor/loader, reexport from @monaco-editor/react

PresetLayout

PrsetLayout which contains sidebar, tabs, code editor by default.

example

import React from 'react'
import { Sandpack, PresetLayout, SandpackFiles } from '@sandpack-monaco/react'
import '@sandpack-monaco/react/dist/index.css'

export const Preset = () => {
  return (
    <div>
      <Sandpack
        customSetup={{
          files: setupFiles,
        }}
      >
        <PresetLayout></PresetLayout>
      </Sandpack>
    </div>
  )
}

Since you have imported the preset ui, remember to import css from @sandpack-monaco/react/dist/index.css

PresetLayoutProps

export type PresetLayoutProps = {
  initalSplitSizes?: [number, number]
  height?: Property.Height<string | number>
  width?: Property.Width<string | number>
  CustomSidebar?: React.ComponentType<any>
  CustomFileTab?: React.ComponentType<any>
  CustomToolbar?: React.ComponentType<any>
}

UI Components

FileExplorer

Pane

PresetPane

ModuleList

FileTabs

Toolbar

ToolbarButton

CodeEditor