0.1.4 • Published 1 year ago

sql-editor-react v0.1.4

Weekly downloads
-
License
-
Repository
github
Last release
1 year ago

sql-editor-react

安装

npm install sql-editor-react

or

yarn add sql-editor-react

使用

import { useRef, useState, type FC } from "react";

import  {Editor} from 'sql-editor-react'

import  {RefEditorInstance} from  'sql-editor-react/types'

import  'sql-editor-react/style'

const App: FC = () => {
  const editorRef = useRef<RefEditorInstance>(null);
  const [code] = useState("SELECT * FROM users;");
  return (
    <>
      <Editor
        ref={editorRef}
        height={200}
        theme="naruto"
        value={code}
        options={
         { readOnly: false}
        }
      />
    </>
  );
};

export default App;
// 引用实例的类型定义
export interface RefEditorInstance {
    container: HTMLDivElement | null
    editor?: editor.IStandaloneCodeEditor
    monaco: IMonacoEditor
    format: () => void // 暴露 formatSQL 方法
    setReadOnly: (value: boolean) => void
  }
// 定义组件的属性类型
export interface MonacoEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    width?: number | string
    height?: number | string
    value?: string
    defaultValue?: string
    dataBase?: Record<string, string[]> //支持数据库 表名
    language?: editor.IStandaloneEditorConstructionOptions['language']
    autoComplete?: (model: editor.ITextModel, position: monaco.Position) => monaco.languages.CompletionItem[]
    theme?: editor.IStandaloneEditorConstructionOptions['theme']
    options?: editor.IStandaloneEditorConstructionOptions //继承MonacoEditor options属性
    editorDidMount?: (editor: editor.IStandaloneCodeEditor, monaco: IMonacoEditor) => void
    onChange?: (value: string, event: editor.IModelContentChangedEvent) => void
    children?: ReactNode  //传递过来的Toolbar 组件 默认支持全屏
  }
 export type Monaco = typeof monaco;
 export type Theme = 'vs-dark' | 'light';
0.1.4

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.8.31

1 year ago

0.8.29

1 year ago

0.8.28

1 year ago

0.8.27

1 year ago

0.8.26

1 year ago

0.8.25

1 year ago

0.8.24

1 year ago

0.8.23

1 year ago

0.8.22

1 year ago

0.8.21

1 year ago

0.8.20

1 year ago

0.8.19

1 year ago

0.8.18

1 year ago

0.8.17

1 year ago

0.8.16

1 year ago

0.8.15

1 year ago

0.8.14

1 year ago

0.8.13

1 year ago

0.8.12

1 year ago

0.8.11

1 year ago

0.8.10

1 year ago

0.8.9

1 year ago

0.8.8

1 year ago

0.8.7

1 year ago

0.8.6

1 year ago

0.8.5

1 year ago

0.8.3

1 year ago

0.8.2

1 year ago

0.8.1

1 year ago

0.8.0

1 year ago

0.7.0

1 year ago

0.6.0

1 year ago

0.5.0

1 year ago

0.4.0

1 year ago

0.3.0

1 year ago

0.2.0

1 year ago

0.1.0

1 year ago