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

3.0.0-alpha.11 • Public • Published

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'
    
    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 IPrismTheme 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.

CSS variables

Name Default value
--yozora-colors-border-code #d3d3d3
--yozora-colors-caret-code #ed6c60
--yozora-fonts-family-code Consolas, 'Source Code Pro', 'Roboto Mono', monospace, sans-serif
--yozora-fonts-size-code 1rem

Related

Readme

Keywords

Package Sidebar

Install

npm i @yozora/react-code-editor

Weekly Downloads

50

Version

3.0.0-alpha.11

License

MIT

Unpacked Size

68.2 kB

Total Files

7

Last publish

Collaborators

  • lemonclown