React Integration

React Integration

Setup

npm install @bnotk/dsx

Import CSS in your entry point:

// main.tsx or App.tsx
import '@bnotk/dsx/css/index.css';

Using Web Components in React

Import the component registration, then use the element in JSX:

import '@bnotk/dsx/components/dialog.js';
import '@bnotk/dsx/components/table.js';
import { useRef } from 'react';

export function MyPage() {
  const dialogRef = useRef<any>(null);

  return (
    <>
      <button className="dsx-btn dsx-btn--primary"
              onClick={() => dialogRef.current?.show()}>
        Open Dialog
      </button>

      <dsx-dialog ref={dialogRef} heading="Hello" size="md">
        <p slot="body">Content here</p>
        <div slot="footer">
          <button className="dsx-btn dsx-btn--primary"
                  onClick={() => dialogRef.current?.close()}>
            Close
          </button>
        </div>
      </dsx-dialog>
    </>
  );
}

Event Handling

React 19+ supports custom element events natively. For older React, use refs:

import '@bnotk/dsx/components/table.js';
import { useEffect, useRef } from 'react';

export function TableDemo() {
  const tableRef = useRef<any>(null);

  useEffect(() => {
    const el = tableRef.current;
    const handler = (e: CustomEvent) => console.log(e.detail.row);
    el?.addEventListener('dsx-row-click', handler);
    return () => el?.removeEventListener('dsx-row-click', handler);
  }, []);

  return (
    <dsx-table
      ref={tableRef}
      sortable
      column-toggle
    />
  );
}

// Set complex properties via ref
useEffect(() => {
  if (tableRef.current) {
    tableRef.current.columns = [
      { id: 'name', label: 'Name', resizable: true },
    ];
    tableRef.current.rows = data;
  }
}, [data]);

TypeScript Declarations

Add type declarations for the custom elements in a .d.ts file:

src/dsx.d.ts

declare namespace JSX {
  interface IntrinsicElements {
    'dsx-dialog': any;
    'dsx-table': any;
    'dsx-accordion': any;
    'dsx-accordion-item': any;
    'dsx-datepicker': any;
    'dsx-dropdown-typeahead': any;
    // ... add as needed
  }
}