Luzmo Analytics Components Kit - React wrappers

Lightweight React wrappers using @lit/react

This package provides React wrappers for the Luzmo Analytics Components Kit web components. Each wrapper is generated automatically using @lit/react's createComponent helper, which provides proper React integration including event handling and TypeScript support.

Installation

npm install @luzmo/react-analytics-components-kit @luzmo/analytics-components-kit react @lit/react

Requirements

• React ^18.0.0 || ^19.0.0.
• @lit/react ^1.0.6.
• The peer package @luzmo/analytics-components-kit provides the underlying custom elements.

Usage

import { LuzmoDataField } from '@luzmo/react-analytics-components-kit';

function App() {
  return (
    <LuzmoDataField
      data={
        {
          /* your data */
        }
      }
      onDataItemDropped={(e) => console.log('Dropped:', e.detail)}
    />
  );
}

Event handling

Events are automatically converted to React-style callback props:

• data-item-dropped → onDataItemDropped
• filters-changed → onFiltersChanged

TypeScript support

import { LuzmoDataField, type LuzmoDataFieldElement } from '@luzmo/react-analytics-components-kit';
import { useRef } from 'react';

function App() {
  const ref = useRef<LuzmoDataFieldElement>(null);

  return <LuzmoDataField ref={ref} />;
}

Notes

• This package depends on @luzmo/analytics-components-kit for the underlying custom elements.
• Importing from @luzmo/analytics-components-kit/react is deprecated; migrate to this package.