diff --git a/examples/grid-lite/components-react/index.html b/examples/grid-lite/components-react/index.html
new file mode 100644
index 0000000..7f1e258
--- /dev/null
+++ b/examples/grid-lite/components-react/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ Highcharts Grid Lite - React Example
+
+
+
+
+
+
+
diff --git a/examples/grid-lite/components-react/package.json b/examples/grid-lite/components-react/package.json
new file mode 100644
index 0000000..cd5b45a
--- /dev/null
+++ b/examples/grid-lite/components-react/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "grid-lite-minimal-react",
+ "version": "0.0.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview",
+ "clean": "rimraf dist node_modules"
+ },
+ "dependencies": {
+ "@highcharts/grid-lite": ">=3.0.0",
+ "@highcharts/grid-lite-react": "workspace:*",
+ "react": ">=18",
+ "react-dom": ">=18"
+ },
+ "devDependencies": {
+ "@types/react": ">=18",
+ "@types/react-dom": ">=18",
+ "@vitejs/plugin-react": "^4.2.0",
+ "typescript": "^5.0.0",
+ "vite": "^5.0.0"
+ }
+}
+
diff --git a/examples/grid-lite/components-react/src/App.tsx b/examples/grid-lite/components-react/src/App.tsx
new file mode 100644
index 0000000..9151ef7
--- /dev/null
+++ b/examples/grid-lite/components-react/src/App.tsx
@@ -0,0 +1,48 @@
+import { useState, useRef } from 'react';
+import {
+ type GridInstance,
+ type GridOptions,
+ type GridRefHandle,
+ Grid
+} from '@highcharts/grid-lite-react';
+
+function App() {
+ const [options] = useState({
+ dataTable: {
+ columns: {
+ name: ['Alice', 'Bob', 'Charlie', 'David', 'Eve'],
+ age: [23, 34, 45, 56, 67],
+ city: ['New York', 'Oslo', 'Paris', 'Tokyo', 'London'],
+ salary: [50000, 60000, 70000, 80000, 90000]
+ }
+ },
+ caption: {
+ text: 'Grid Lite'
+ },
+ pagination: {
+ enabled: true,
+ pageSize: 3,
+ controls: {
+ pageSizeSelector: true,
+ pageButtons: true
+ }
+ }
+ });
+ const grid = useRef | null>(null);
+
+ const onButtonClick = () => {
+ console.info('(ref) grid:', grid.current?.grid);
+ };
+ const onGridCallback = (grid: GridInstance) => {
+ console.info('(callback) grid:', grid);
+ };
+
+ return (
+ <>
+
+
+
+ );
+}
+
+export default App;
diff --git a/examples/grid-lite/components-react/src/index.css b/examples/grid-lite/components-react/src/index.css
new file mode 100644
index 0000000..04bacd8
--- /dev/null
+++ b/examples/grid-lite/components-react/src/index.css
@@ -0,0 +1,26 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+ width: 100%;
+ min-height: 100vh;
+ padding: 20px;
+}
+
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #121212;
+ color: #ffffff;
+ }
+}
diff --git a/examples/grid-lite/components-react/src/main.tsx b/examples/grid-lite/components-react/src/main.tsx
new file mode 100644
index 0000000..0c657b5
--- /dev/null
+++ b/examples/grid-lite/components-react/src/main.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+);
+
diff --git a/examples/grid-lite/components-react/tsconfig.json b/examples/grid-lite/components-react/tsconfig.json
new file mode 100644
index 0000000..78a6daf
--- /dev/null
+++ b/examples/grid-lite/components-react/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "lib": [
+ "DOM",
+ "ES2016",
+ "ES2017.Object"
+ ],
+ "jsx": "react-jsx",
+ "module": "ES6",
+ "moduleResolution": "node",
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitThis": true,
+ "noFallthroughCasesInSwitch": true,
+ "skipDefaultLibCheck": true,
+ "skipLibCheck": true,
+ "ignoreDeprecations": "5.0",
+ "allowSyntheticDefaultImports": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
+
diff --git a/examples/grid-lite/components-react/tsconfig.node.json b/examples/grid-lite/components-react/tsconfig.node.json
new file mode 100644
index 0000000..f7c2070
--- /dev/null
+++ b/examples/grid-lite/components-react/tsconfig.node.json
@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true,
+ "types": ["node"]
+ },
+ "include": ["vite.config.ts"]
+}
+
diff --git a/examples/grid-lite/components-react/vite.config.ts b/examples/grid-lite/components-react/vite.config.ts
new file mode 100644
index 0000000..adf42ba
--- /dev/null
+++ b/examples/grid-lite/components-react/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: [
+ {
+ find: /^@highcharts\/grid-lite(\/.*)?$/,
+ replacement: resolve(__dirname, 'node_modules/@highcharts/grid-lite$1')
+ }
+ ]
+ },
+ server: {
+ port: 3000
+ }
+});
+