@yozora/react-code-editor
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0-alpha.4 • Public • Published

    @yozora/react-code-editor


    Simple no-frills code editor with syntax highlighting, forked from react-simple-code-editor as it's seems not been updated for several months.

    Install

    • npm

      npm install --save @yozora/react-code-editor
    • yarn

      yarn add @yozora/react-code-editor

    Usage

    • Basic:

      import React, { useState } from 'react'
      import CodeEditor from '@yozora/react-code-editor'
      import '@yozora/react-code-editor/lib/esm/index.css'
      
      function Wrapper() {
        const [code, setCode] = useState<string>('let a: number = 1 + 2;')
      
        return (
          <CodeEditor
            lang="typescript"
            code={ code }
            onChange={ setCode }
          />
        )
      }
      
      const wrapper = (<Wrapper />)

    Props

    Name Type Required Default Description
    autoFocus boolean false - Set the editor focus in default
    className string false - CSS class name for the container
    code string true - Code content
    darken boolean false true Dark mode (vcsDarkTheme / vscLightTheme)
    lang string true - Code language
    lineHeight React.CSSProperties['height'] false '1.8em' line height
    onChange (content: string) => void true - Triggered when code changed.
    preClassName string false - CSS class name for the underlying pre
    preStyle React.CSSProperties false - CSS style object for the underlying textarea
    showLinenos boolean false true Display line numbers
    style React.CSSProperties false - CSS style object for the container
    textareaClassName string false - CSS class name for the underlying textarea
    textareaStyle React.CSSProperties false - CSS style object for the underlying textarea
    theme PrismTheme false See below Highlight prism theme.
    • className: The root element of this component will always bind with the CSS class 'yozora-code-editor'

    • theme: Default theme depends on the value of darken.

    Related

    Install

    npm i @yozora/react-code-editor

    DownloadsWeekly Downloads

    184

    Version

    2.0.0-alpha.4

    License

    MIT

    Unpacked Size

    62.8 kB

    Total Files

    11

    Last publish

    Collaborators

    • lemonclown