Octostar platform react components and hooks

Quick Start

Wrap your app with OctostarContextProvider and use the provided hooks and components:

import { OctostarContextProvider, OsDropzone, useOctostarContext } from '@octostar/platform-react';
import type { Entity } from '@octostar/platform-types';

function MyComponent() {
  const { DesktopAPI } = useOctostarContext();

  const handleDrop = (entities: Entity[]) => {
    console.log('Dropped entities:', entities);
    // Use DesktopAPI to interact with Octostar
    // e.g., DesktopAPI.open(entity)
  };

  return (
    <OsDropzone
      accept={{ entities: true }}
      onDropEntities={handleDrop}
      texts={{
        idle: 'Drop Octostar records here',
        active: 'Release to drop records',
      }}
    />
  );
}

function App() {
  return (
    <OctostarContextProvider>
      <MyComponent />
    </OctostarContextProvider>
  );
}

Examples

Complete working examples are available in the examples directory:

• Dropzone Example - Demonstrates using OsDropzone to accept records and display them with OsContextMenu

To run an example:

cd examples/dropzone
pnpm install
pnpm dev

Visit http://localhost:3100 to see the example in action.