Electric SDK React Components

React wrapper components for Electric SDK Stencil.

Installation

npm install electric-sdk-react
# or
pnpm add electric-sdk-react

Usage

import { ElectricAssetList, ElectricPurchaseHardware } from 'electric-sdk-react';

function App() {
  return (
    <div>
      <ElectricAssetList environment="staging" autoLogin={true} onErrorOccurred={e => console.error(e.detail)} />

      <ElectricPurchaseHardware iframeUrl="https://example.com/purchase" width="100%" height="600px" />
    </div>
  );
}

Available Components

• ElectricAssetList - Displays a list of user assets with built-in authentication
• ElectricAssetItem - Displays a single asset/device
• ElectricPurchaseHardware - Embeds the hardware purchase interface
• ElectricAuthProvider - Wrapper for initializing SDK configuration

Documentation

For full documentation, see the main README or visit the documentation site.

Development

⚠️ Important: This package contains auto-generated React wrappers created by @stencil/react-output-target.

Do NOT Manually Edit

Never manually edit files in src/components/ - they are automatically generated and will be overwritten!

How to Add/Modify Components

1. Edit the Stencil component in ../stencil-library/src/components/
2. Build Stencil library to regenerate React wrappers:

   # From the monorepo root
   pnpm build:stencil

3. Build React library:

   pnpm build:react

How It Works

The stencil.config.ts configures automatic React wrapper generation:

reactOutputTarget({
  outDir: '../react-library/src/components',
  stencilPackageName: 'electric-sdk-stencil',
  customElementsDir: 'dist/components',
});

When you build the Stencil library, it:

• Reads your Stencil components
• Generates React wrappers with proper TypeScript types
• Converts web component props to React props (camelCase)
• Converts events to React event handlers (e.g., onErrorOccurred)

Contributing

See the Contributing Guide for detailed instructions on adding new components.

License

MIT