Documentation
Installation
Get qlik-script-editor installed and ready to use in your project in just a few steps.
Prerequisites
Make sure you have the following installed before proceeding:
Quick Start
Choose your preferred package manager to install qlik-script-editor:
npm install qlik-script-editor
yarn add qlik-script-editor
pnpm add qlik-script-editor
Basic Setup
After installation, you can import and use qlik-script-editor in your React application. Here's a simple example to get you started:
1import React from 'react';2import QlikEditor from 'qlik-script-editor';34function App() {5 const [script, setScript] = React.useState('LOAD * FROM DataSource;');67 return (8 <div className="p-4">9 <h1>My Qlik Script Editor</h1>10 <QlikEditor11 value={script}12 onChange={setScript}13 height="400px"14 theme="auto"15 />16 </div>17 );18}1920export default App;
TypeScript Support
qlik-script-editor includes built-in TypeScript declarations for full type safety. No additional @types packages are needed.
1import QlikEditor, { EditorProps, QlikEditorRef } from 'qlik-script-editor';23interface MyEditorProps {4 initialValue?: string;5 onScriptChange: (value: string) => void;6}78const MyEditor: React.FC<MyEditorProps> = ({ initialValue, onScriptChange }) => {9 const editorRef = React.useRef<QlikEditorRef>(null);1011 const handleFormat = () => {12 editorRef.current?.format();13 };1415 return (16 <div>17 <button onClick={handleFormat}>Format Code</button>18 <QlikEditor19 ref={editorRef}20 defaultValue={initialValue}21 onChange={onScriptChange}22 height="400px"23 />24 </div>25 );26};
Installation Complete!
You're all set! qlik-script-editor is now installed and ready to use in your project.
Troubleshooting
Having issues with installation? Here are some common solutions:
Node.js Version
Ensure you're using Node.js 16 or higher. Check with node --version
Clear Cache
Delete node_modules and package-lock.json, then run npm install again
Peer Dependencies
Install React 16.8+ if not already present: npm install react react-dom
If you're still experiencing issues, here are some resources: