{"id":43895,"library":"sql-editor-component","title":"SQL Editor Component","description":"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.","status":"active","version":"1.0.18","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install sql-editor-component","lang":"bash","label":"npm"},{"cmd":"yarn add sql-editor-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add sql-editor-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for React applications.","package":"react","optional":false},{"reason":"Required peer dependency for DOM rendering.","package":"react-dom","optional":false},{"reason":"Required for TypeScript support.","package":"@types/react","optional":true},{"reason":"Required for TypeScript support.","package":"@types/react-dom","optional":true}],"imports":[{"note":"Default export only; named import will result in undefined.","wrong":"import { SqlEditor } from 'sql-editor-component'","symbol":"default (SqlEditor)","correct":"import SqlEditor from 'sql-editor-component'"},{"note":"Database is a named type export, not default.","wrong":"import Database from 'sql-editor-component'","symbol":"Database","correct":"import { Database } from 'sql-editor-component'"},{"note":"These are interfaces; importing as values works but for type-only usage prefer `import type`.","wrong":"import { Schema, Table } from 'sql-editor-component'","symbol":"Schema, Table","correct":"import type { Schema, Table } from 'sql-editor-component'"}],"quickstart":{"code":"import React from 'react';\nimport SqlEditor, { Database } from 'sql-editor-component';\n\nconst dbStructure: Database = {\n  databaseName: 'mydb',\n  schemas: [{\n    name: 'public',\n    tables: [\n      { name: 'users', columns: ['id', 'name', 'email'] },\n      { name: 'orders', columns: ['id', 'user_id', 'total'] }\n    ]\n  }]\n};\n\nfunction App() {\n  return (\n    <SqlEditor\n      value=\"SELECT * FROM \"\n      dbStructure={dbStructure}\n      onQueryRun={(sql) => console.log(sql)}\n      fontSize={14}\n      legend={true}\n    />\n  );\n}\n\nexport default App;","lang":"typescript","description":"Shows basic usage with database structure for autocomplete, custom font size, and legend."},"warnings":[{"fix":"npm install @types/react @types/react-dom --save-dev","message":"Peer dependency @types/react must be installed manually. Missing @types/react causes TypeScript compilation errors.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use useRef or useCallback to capture latest sql value.","message":"onSelect callback is debounced by 300ms; this can cause stale state in closures if not careful.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `onChange` to sync external state.","message":"The `value` prop is initially used to set the editor content but subsequent changes are not tracked — component is uncontrolled.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Omit `runButton` entirely if you do not want a run button.","message":"Setting `showRunButton={false}` hides default run button but custom `runButton` may still be rendered? Check behavior.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Pass <CustomButton /> as JSX element, not the component reference.","message":"The `runButton` prop accepts a ReactElement; passing a functional component incorrectly will result in no rendering.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Provide a valid Database object or array; empty array results in no schema completions.","message":"If `dbStructure` is an empty array, autocomplete only provides SQL keywords but no schema tables/columns.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"No fix available; plan for localization is not documented.","message":"The `legend` prop shows keyboard shortcuts; it is not localized and always in English.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.0.18':30 '17':56 '19':57 'autocomplet':19 'awar':42 'column':46 'compon':3,6 'context':41 'context-awar':40 'ctrl':23 'current':26 'databas':37 'depend':60 'editor':2,9,14 'f':25 'format':22 'highlight':17 'intellig':18 'javascript':61 'keyword':49 'monaco':8 'month':32 'multipl':36 'peer':59 'provid':11 'react':5,55 'releas':31 'requir':54 'schema':38 'shift':24 'ship':50 'singl':34 'sql':1,13,21,48 'stabl':27 'suggest':43 'support':33 'syntax':16 'tabl':45 'type':52 'typescript':51,62 'version':28 'wrap':7","created_at":"2026-06-05T17:01:59.632651+00:00","updated_at":"2026-06-05T17:01:59.632651+00:00","problems":[{"fix":"Replace `import { SqlEditor } from 'sql-editor-component'` with `import SqlEditor from 'sql-editor-component'`","cause":"Named import used instead of default import.","error":"TypeError: SqlEditor is not a function"},{"fix":"Run `npm install @types/react @types/react-dom --save-dev` and restart the TS server.","cause":"Database type is not recognized because TypeScript cannot find it due to missing @types/react peer dependency.","error":"Module '\"sql-editor-component\"' has no exported member 'Database'."},{"fix":"Ensure `node_modules` is properly hoisted; try `npm dedupe` or install monaco-editor explicitly if needed.","cause":"Monaco Editor is bundled internally, but the package may have an issue if running in a monorepo or with hoisting.","error":"Cannot find module 'monaco-editor' or its corresponding type declarations."},{"fix":"Upgrade to >=1.0.18 or wrap the component to filter out custom props.","cause":"Prop is passed to the underlying container div due to incorrect prop forwarding in certain versions.","error":"Warning: React does not recognize the `showRunButton` prop on a DOM element."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"sql-editor-component","openapi_spec":null,"status_page":null,"smithery":null,"categories":["productivity","database"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-05","next_check":"2026-09-03","install_tag":null}}