Registry / productivity / sql-editor-component

sql-editor-component

library1.0.18jsnpmunverified

A React component wrapping Monaco Editor to provide an SQL editor with syntax highlighting, intelligent autocomplete, and SQL formatting (Ctrl+Shift+F). Current stable version is 1.0.18, released monthly. Supports single or multiple database schemas for context-aware suggestions of tables, columns, and SQL keywords. Ships TypeScript types and requires React 17–19 as peer dependencies.

productivity database

npm install sql-editor-component

package ↗

INSTALL

IMPORT

SIG · SQL-EDITOR-COMPONE

sql-editor-component

productivityjavascriptv1.0.18

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (SqlEditor)

✓ import SqlEditor from 'sql-editor-component'

✗ import { SqlEditor } from 'sql-editor-component'

Default export only; named import will result in undefined.

Database

✓ import { Database } from 'sql-editor-component'

✗ import Database from 'sql-editor-component'

Database is a named type export, not default.

Schema, Table

✓ import type { Schema, Table } from 'sql-editor-component'

✗ import { Schema, Table } from 'sql-editor-component'

These are interfaces; importing as values works but for type-only usage prefer `import type`.

Shows basic usage with database structure for autocomplete, custom font size, and legend.

import React from 'react'; import SqlEditor, { Database } from 'sql-editor-component'; const dbStructure: Database = { databaseName: 'mydb', schemas: [{ name: 'public', tables: [ { name: 'users', columns: ['id', 'name', 'email'] }, { name: 'orders', columns: ['id', 'user_id', 'total'] } ] }] }; function App() { return ( <SqlEditor value="SELECT * FROM " dbStructure={dbStructure} onQueryRun={(sql) => console.log(sql)} fontSize={14} legend={true} /> ); } export default App;

Debug

Known issues

breakingPeer dependency @types/react must be installed manually. Missing @types/react causes TypeScript compilation errors.

fix

npm install @types/react @types/react-dom --save-dev

affects: >=1.0.0

gotchaonSelect callback is debounced by 300ms; this can cause stale state in closures if not careful.

fix

Use useRef or useCallback to capture latest sql value.

affects: >=1.0.0

deprecatedThe `value` prop is initially used to set the editor content but subsequent changes are not tracked — component is uncontrolled.

fix

Use `onChange` to sync external state.

affects: >=1.0.0

gotchaSetting `showRunButton={false}` hides default run button but custom `runButton` may still be rendered? Check behavior.

fix

Omit `runButton` entirely if you do not want a run button.

affects: >=1.0.0

deprecatedThe `runButton` prop accepts a ReactElement; passing a functional component incorrectly will result in no rendering.

fix

Pass <CustomButton /> as JSX element, not the component reference.

affects: >=1.0.0

gotchaIf `dbStructure` is an empty array, autocomplete only provides SQL keywords but no schema tables/columns.

fix

Provide a valid Database object or array; empty array results in no schema completions.

affects: >=1.0.0

deprecatedThe `legend` prop shows keyboard shortcuts; it is not localized and always in English.

fix

No fix available; plan for localization is not documented.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: SqlEditor is not a function

Named import used instead of default import.

fix

Replace `import { SqlEditor } from 'sql-editor-component'` with `import SqlEditor from 'sql-editor-component'`

Module '"sql-editor-component"' has no exported member 'Database'.

Database type is not recognized because TypeScript cannot find it due to missing @types/react peer dependency.

fix

Run `npm install @types/react @types/react-dom --save-dev` and restart the TS server.

Cannot find module 'monaco-editor' or its corresponding type declarations.

Monaco Editor is bundled internally, but the package may have an issue if running in a monorepo or with hoisting.

fix

Ensure `node_modules` is properly hoisted; try `npm dedupe` or install monaco-editor explicitly if needed.

Warning: React does not recognize the `showRunButton` prop on a DOM element.

Prop is passed to the underlying container div due to incorrect prop forwarding in certain versions.

fix

Upgrade to >=1.0.18 or wrap the component to filter out custom props.

Upgrade

Version history

1.0.18latest on npm

Audit

Dependencies

reactrequiredRequired peer dependency for React applications.

react-domrequiredRequired peer dependency for DOM rendering.

@types/reactoptionalRequired for TypeScript support.

@types/react-domoptionalRequired for TypeScript support.

Agent activity

47 hits · last 30 days

node