0.1.4 • Published 1 year ago
sql-editor-react v0.1.4
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