npm package: @sandpack-monaco/react
Description: Headless editor for React
Author: pakholeung37@gmail.com
Latest version: 0.4.7

# @sandpack-monaco/react

Headless editor for React

## Install

```bash
yarn add @sandpack-monaco/react
```

## useage

```jsx
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.

```jsx
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

```ts
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.

```ts
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()`.

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

### useActiveFile

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

```ts
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()`.

```ts
function useHistory(): string[]
```

### useSanpackAction

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

```ts
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.

```ts
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.

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

### useEditorInstance

React hook that return the monaco-editor instance.

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

### useMonaco

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

```ts
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

```jsx
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

```ts
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