@devbookhq/react NPM

Devbook React

Devbook library for React.

Installation

npm install @devbookhq/react

yarn add @devbookhq/react

Usage

You need to wrap Devbook components that use sessions in the SessionProvider component

`SessionProvider`

Some components in this package needs access to Devbook session to work. You have to have SessionProvider somewhere as their parent.

import { SessionProvider } from '@devbookhq/react'

export default (
  <SessionProvider opts={{ codeSnippetID: '<CODE_SNIPPET_ID>' }}>
    <...>
  </SessionProvider>
)

You can then access the provided session with the useProvidedSession hook.

`Casing`, `withCasing`

If you want the component to have definite round borders wrap it with the withCasing HOC.

import { AnyComponent, withCasing } from '@devbookhq/react'

const ComponentWithDefiniteBorders = withCasing(AnyComponent)

<ComponentWithDefiniteBorders
  //...
/>

Components

Available components:

CodeSnippet
CodeEditor
Terminal

`CodeSnippet`

import { CodeSnippet, SessionProvider } from '@devbookhq/react'

export default (
  <SessionProvider opts={{ codeSnippetID: '<CODE_SNIPPET_ID>' }}>
    <CodeSnippet
      isEditable={true}
      fallbackContent={'console.log(5)'}
      fallbackLanguage={'Typescript'}
      id={'<CODE_SNIPPET_ID>'}
      connectIDs={['<PREPENDED_CODE_SNIPPET_ID>']}
    />
  </SessionProvider>
)

`CodeEditor`

import { CodeEditor, SessionProvider } from '@devbookhq/react'

export default (
  <SessionProvider opts={{ codeSnippetID: '<CODE_SNIPPET_ID>' }}>
    <CodeEditor
      autofocus={true}
      filename={} // Filename for the language service
      height={}
      isReadOnly={false}
      languageServer={ls} // Language server (from the `useLanguageServer` hook)
      onContentChange={(c) => {}} // Listen to changes
      ref={ref} // Control the editor from the parent component
      content={c} // Initial content
      language={} // Language for highlighting
    />
  </SessionProvider>
)

`Terminal`

import { Terminal, SessionProvider } from '@devbookhq/react'

export default (
  <SessionProvider opts={{ codeSnippetID: '<CODE_SNIPPET_ID>' }}>
    <Terminal
      onStart={(handler) => {}} // Runs when the terminal starts and allows you to use `handler` to control the terminal
      ref={ref} // Use `useRef` to get reference that exposes functions to control the terminal from the parent component
      autofocus={true}
      onRunningCmdChange={(state) => {}} // Listen to changes in the executed command state
    />
  </SessionProvider>
)