Grid import not GridLite GridPro

README.md

@@ -1,19 +1,19 @@
 # Highcharts Grid React
 
-Monorepo containing React wrappers for [Highcharts Grid Lite](https://www.highcharts.com/docs/grid/getting-started/grid-lite) and [Highcharts Grid Pro](https://www.highcharts.com/docs/grid/getting-started/grid-pro).
+Monorepo containing React packages for [Highcharts Grid Lite](https://www.highcharts.com/docs/grid/getting-started/grid-lite) and [Highcharts Grid Pro](https://www.highcharts.com/docs/grid/getting-started/grid-pro).
 
 ## Packages
 
 This monorepo contains the following packages:
 
 ### Published Packages
 
-- **[@highcharts/grid-lite-react](./packages/grid-lite-react/)** - React wrapper for Highcharts Grid Lite
-- **[@highcharts/grid-pro-react](./packages/grid-pro-react/)** - React wrapper for Highcharts Grid Pro
+- **[@highcharts/grid-lite-react](./packages/grid-lite-react/)** - React package for Highcharts Grid Lite
+- **[@highcharts/grid-pro-react](./packages/grid-pro-react/)** - React package for Highcharts Grid Pro
 
 ### Internal Packages
 
-- **[@highcharts/grid-shared-react](./packages/grid-shared-react/)** - Shared core functionality used by both Grid Lite and Grid Pro React wrappers
+- **[@highcharts/grid-shared-react](./packages/grid-shared-react/)** - Shared core functionality used by both Grid Lite and Grid Pro React packages
 
 ## Quick Start
 
@@ -33,7 +33,7 @@ npm install @highcharts/grid-pro-react
 
 ```tsx
 import React, { useState } from 'react';
-import { GridLite, type GridOptions } from '@highcharts/grid-lite-react';
+import { Grid, type GridOptions } from '@highcharts/grid-lite-react';
 
 function App() {
   const [options] = useState<GridOptions>({
@@ -45,15 +45,15 @@ function App() {
     }
   });
 
-  return <GridLite options={options} />;
+  return <Grid options={options} />;
 }
 ```
 
 #### Grid Pro
 
 ```tsx
 import React, { useState } from 'react';
-import { GridPro, type GridOptions } from '@highcharts/grid-pro-react';
+import { Grid, type GridOptions } from '@highcharts/grid-pro-react';
 
 function App() {
   const [options] = useState<GridOptions>({
@@ -65,7 +65,7 @@ function App() {
     }
   });
 
-  return <GridPro options={options} />;
+  return <Grid options={options} />;
 }
 ```
 
@@ -74,8 +74,8 @@ function App() {
 ```
 highcharts-grid-react/
 ├── packages/                    # Source packages
-│   ├── grid-lite-react/        # Grid Lite React wrapper
-│   ├── grid-pro-react/          # Grid Pro React wrapper
+│   ├── grid-lite-react/        # Grid Lite React package
+│   ├── grid-pro-react/          # Grid Pro React package
 │   └── grid-shared-react/         # Shared core functionality
 ├── examples/                    # Example applications
 │   ├── grid-lite/               # Grid Lite examples
@@ -89,9 +89,9 @@ highcharts-grid-react/
 
 ### Packages
 
-- **`packages/grid-lite-react/`** - React component wrapper for Highcharts Grid Lite. See [README](./packages/grid-lite-react/README.md) for details.
-- **`packages/grid-pro-react/`** - React component wrapper for Highcharts Grid Pro. See [README](./packages/grid-pro-react/README.md) for details.
-- **`packages/grid-shared-react/`** - Internal package containing shared React components and hooks used by both wrappers.
+- **`packages/grid-lite-react/`** - React component package for Highcharts Grid Lite. See [README](./packages/grid-lite-react/README.md) for details.
+- **`packages/grid-pro-react/`** - React component package for Highcharts Grid Pro. See [README](./packages/grid-pro-react/README.md) for details.
+- **`packages/grid-shared-react/`** - Internal package containing shared React components and hooks used by both packages.
 
 ### Examples
 
@@ -171,8 +171,8 @@ import { type GridOptions } from '@highcharts/grid-lite-react';
 import '@highcharts/grid-lite/css/grid-lite.css';
 
 // Disable SSR for the Grid component
-const GridLite = dynamic(
-  () => import('@highcharts/grid-lite-react').then((mod) => mod.GridLite),
+const Grid = dynamic(
+  () => import('@highcharts/grid-lite-react').then((mod) => mod.Grid),
   { ssr: false }
 );
 
@@ -186,7 +186,7 @@ export default function Page() {
     }
   });
 
-  return <GridLite options={options} />;
+  return <Grid options={options} />;
 }
 ```
 
@@ -210,4 +210,3 @@ See the [Next.js examples](./examples/) for complete working implementations.
 ## License
 
 SEE LICENSE IN [LICENSE](https://github.com/highcharts/grid-react/blob/main/LICENSE).
-

examples/grid-lite/minimal-nextjs/app/page.tsx

@@ -8,9 +8,10 @@ import {
   type GridRefHandle
 } from '@highcharts/grid-lite-react';
 
-// Dynamically import Grid with SSR disabled to avoid window is not defined error
-const GridLite = dynamic(
-  () => import('@highcharts/grid-lite-react').then((mod) => mod.GridLite),
+// Dynamic import with ssr:false is required because @highcharts/grid-lite
+// accesses `window` at module load time
+const Grid = dynamic(
+  () => import('@highcharts/grid-lite-react').then((mod) => mod.Grid),
   { ssr: false }
 );
 
@@ -37,20 +38,19 @@ export default function Home() {
     }
   });
 
-  const gridLite = useRef<GridRefHandle<GridOptions> | null>(null);
+  const gridRef = useRef<GridRefHandle<GridOptions> | null>(null);
 
   const onButtonClick = () => {
-    console.info('(ref) gridLite:', gridLite.current?.grid);
+    console.info('(ref) grid:', gridRef.current?.grid);
   };
-  const onGridLiteCallback = (grid: GridInstance<GridOptions>) => {
-    console.info('(callback) gridLite:', grid);
+  const onGridCallback = (grid: GridInstance<GridOptions>) => {
+    console.info('(callback) grid:', grid);
   };
 
   return (
     <>
-        <GridLite options={liteOptions} gridRef={gridLite} callback={onGridLiteCallback} />
+        <Grid options={liteOptions} gridRef={gridRef} callback={onGridCallback} />
         <button onClick={onButtonClick}>Click me</button>
     </>
   );
 }
-

examples/grid-lite/minimal-react/src/App.tsx

@@ -3,7 +3,7 @@ import {
   type GridInstance,
   type GridOptions,
   type GridRefHandle,
-  GridLite
+  Grid
 } from '@highcharts/grid-lite-react';
 
 function App() {
@@ -31,19 +31,18 @@ function App() {
   const grid = useRef<GridRefHandle<GridOptions> | null>(null);
 
   const onButtonClick = () => {
-    console.info('(ref) gridLite:', grid.current?.grid);
+    console.info('(ref) grid:', grid.current?.grid);
   };
-  const onGridLiteCallback = (grid: GridInstance<GridOptions>) => {
-    console.info('(callback) gridLite:', grid);
+  const onGridCallback = (grid: GridInstance<GridOptions>) => {
+    console.info('(callback) grid:', grid);
   };
 
   return (
     <>
-      <GridLite options={options} gridRef={grid} callback={onGridLiteCallback} />
+      <Grid options={options} gridRef={grid} callback={onGridCallback} />
       <button onClick={onButtonClick}>Click me</button>
     </>
   );
 }
 
 export default App;
-

examples/grid-pro/minimal-nextjs/app/page.tsx

@@ -3,14 +3,15 @@
 import { useState, useRef } from 'react';
 import dynamic from 'next/dynamic';
 import {
-    type GridInstance,
-    type GridOptions,
-    type GridRefHandle
+  type GridInstance,
+  type GridOptions,
+  type GridRefHandle
 } from '@highcharts/grid-pro-react';
 
-// Dynamically import Grid with SSR disabled to avoid window is not defined error
-const GridPro = dynamic(
-  () => import('@highcharts/grid-pro-react').then((mod) => mod.GridPro),
+// Dynamic import with ssr:false is required because @highcharts/grid-pro
+// accesses `window` at module load time
+const Grid = dynamic(
+  () => import('@highcharts/grid-pro-react').then((mod) => mod.Grid),
   { ssr: false }
 );
 
@@ -53,20 +54,19 @@ export default function Home() {
     }]
   });
 
-  const gridPro = useRef<GridRefHandle<GridOptions> | null>(null);
+  const gridRef = useRef<GridRefHandle<GridOptions> | null>(null);
 
   const onButtonClick = () => {
-    console.info('(ref) gridPro:', gridPro.current?.grid);
+    console.info('(ref) grid:', gridRef.current?.grid);
   };
-  const onGridProCallback = (grid: GridInstance<GridOptions>) => {
-    console.info('(callback) gridPro:', grid);
+  const onGridCallback = (grid: GridInstance<GridOptions>) => {
+    console.info('(callback) grid:', grid);
   };
 
   return (
     <>
-        <GridPro options={proOptions} gridRef={gridPro} callback={onGridProCallback} />
+        <Grid options={proOptions} gridRef={gridRef} callback={onGridCallback} />
         <button onClick={onButtonClick}>Click me</button>
     </>
   );
 }
-

examples/grid-pro/minimal-react/src/App.tsx

@@ -3,7 +3,7 @@ import {
   type GridInstance,
   type GridOptions,
   type GridRefHandle,
-  GridPro,
+  Grid,
 } from '@highcharts/grid-pro-react';
 
 function App() {
@@ -47,19 +47,18 @@ function App() {
   const grid = useRef<GridRefHandle<GridOptions> | null>(null);
 
   const onButtonClick = () => {
-    console.info('(ref) gridPro:', grid.current?.grid);
+    console.info('(ref) grid:', grid.current?.grid);
   };
-  const onGridProCallback = (grid: GridInstance<GridOptions>) => {
-    console.info('(callback) gridPro:', grid);
+  const onGridCallback = (grid: GridInstance<GridOptions>) => {
+    console.info('(callback) grid:', grid);
   };
 
   return (
     <>
-      <GridPro options={options} gridRef={grid} callback={onGridProCallback} />
+      <Grid options={options} gridRef={grid} callback={onGridCallback} />
       <button onClick={onButtonClick}>Click me</button>
     </>
   );
 }
 
 export default App;
-

package.json

@@ -6,6 +6,7 @@
     "scripts": {
         "test": "vitest run",
         "test:watch": "vitest",
+        "pretest:e2e": "pnpm build",
         "test:e2e": "vitest run --config vitest.e2e.config.ts",
         "test:all": "pnpm test && pnpm test:e2e",
         "check": "pnpm lint && pnpm test",

packages/grid-lite-react/README.md

@@ -16,7 +16,7 @@ npm install @highcharts/grid-lite-react
 
 ```tsx
 import React, { useState } from 'react';
-import { GridLite, type GridOptions } from '@highcharts/grid-lite-react';
+import { Grid, type GridOptions } from '@highcharts/grid-lite-react';
 
 function App() {
   const [options] = useState<GridOptions>({
@@ -32,20 +32,21 @@ function App() {
     }
   });
 
-  return <GridLite options={options} />;
+  return <Grid options={options} />;
 }
 ```
 
 ## API
 
-### `GridLite`
+### `Grid`
 
 React component that wraps Highcharts Grid Lite.
 
 #### Props
 
 - `options` (required): Configuration options for the grid. Type: `GridOptions`
-- `gridRef` (optional): Ref to access the underlying grid instance. Type: `RefObject<GridRefHandle<GridOptions>>`
+- `ref` (optional): React ref to access the underlying grid instance. Type: `RefObject<GridRefHandle<GridOptions>>`
+- `gridRef` (optional): Alternative prop-based ref. Type: `RefObject<GridRefHandle<GridOptions>>`
 - `callback` (optional): Callback function called when the grid is initialized. Receives the grid instance as parameter. Type: `(grid: GridInstance<GridOptions>) => void`
 
 ### `GridOptions`
@@ -82,7 +83,7 @@ You can access the grid instance in two ways:
 **Using ref:**
 ```tsx
 import { useRef } from 'react';
-import { GridLite, type GridRefHandle, type GridOptions } from '@highcharts/grid-lite-react';
+import { Grid, type GridRefHandle, type GridOptions } from '@highcharts/grid-lite-react';
 
 function App() {
   const gridRef = useRef<GridRefHandle<GridOptions> | null>(null);
@@ -97,7 +98,7 @@ function App() {
 
   return (
     <>
-      <GridLite options={options} gridRef={gridRef} />
+      <Grid options={options} ref={gridRef} />
       <button onClick={handleClick}>Access Grid</button>
     </>
   );
@@ -106,14 +107,14 @@ function App() {
 
 **Using callback:**
 ```tsx
-import { GridLite, type GridInstance, type GridOptions } from '@highcharts/grid-lite-react';
+import { Grid, type GridInstance, type GridOptions } from '@highcharts/grid-lite-react';
 
 function App() {
   const handleGridReady = (grid: GridInstance<GridOptions>) => {
     console.log('Grid initialized:', grid);
   };
 
-  return <GridLite options={options} callback={handleGridReady} />;
+  return <Grid options={options} callback={handleGridReady} />;
 }
 ```
 
@@ -130,8 +131,8 @@ import { type GridOptions } from '@highcharts/grid-lite-react';
 import '@highcharts/grid-lite/css/grid-lite.css';
 
 // Disable SSR for the Grid component
-const GridLite = dynamic(
-  () => import('@highcharts/grid-lite-react').then((mod) => mod.GridLite),
+const Grid = dynamic(
+  () => import('@highcharts/grid-lite-react').then((mod) => mod.Grid),
   { ssr: false }
 );
 
@@ -145,7 +146,7 @@ export default function Page() {
     }
   });
 
-  return <GridLite options={options} />;
+  return <Grid options={options} />;
 }
 ```
 
@@ -158,4 +159,3 @@ For detailed documentation on available options and features, see the [Highchart
 ## License
 
 SEE LICENSE IN [LICENSE](https://github.com/highcharts/grid-react/blob/main/packages/grid-lite-react/LICENSE).
-

packages/grid-lite-react/src/__tests__/Grid.test.tsx

@@ -1,9 +1,9 @@
 import { createGridTests } from '@highcharts/grid-shared-react/src/test/createGridTests';
-import { GridLite, GridOptions } from '../index';
+import { Grid, GridOptions } from '../index';
 
 createGridTests<GridOptions>(
-    'GridLite',
-    GridLite,
+    'Grid Lite',
+    Grid,
     {
         dataTable: {
             columns: {

packages/grid-lite-react/src/index.ts

@@ -9,6 +9,7 @@
 
 import GridLite from '@highcharts/grid-lite';
 
+export { default as Grid } from './Grid';
 export { default as GridLite } from './Grid';
 export type { GridInstance } from '@highcharts/grid-shared-react';
 export type { GridRefHandle } from '@highcharts/grid-shared-react';