@squeletteapp/widget-react

React components and hooks for Squelette feedback widgets.

Installation

npm install @squeletteapp/widget-react
# or
yarn add @squeletteapp/widget-react

Usage

Using Components (Recommended)

The easiest way to use Squelette widgets in React. Components automatically generate unique IDs using React's useId() hook:

import { FeedbackWidget, RoadmapWidget, ChangelogWidget } from '@squeletteapp/widget-react';

function App() {
  return (
    <div>
      <FeedbackWidget
        workspaceSlug="your-workspace"
        boardSlug="feature-requests"
        theme="light"
        position="top"
        onOpenChange={(isOpen) => console.log('Widget open:', isOpen)}
      >
        Give Feedback
      </FeedbackWidget>

      <RoadmapWidget
        workspaceSlug="your-workspace"
        boardSlug="roadmap"
        theme="dark"
      >
        View Roadmap
      </RoadmapWidget>

      <ChangelogWidget
        workspaceSlug="your-workspace"
        theme="light"
      >
        What's New
      </ChangelogWidget>
    </div>
  );
}

Using Hooks

For more control, use the hooks directly:

import { useFeedbackWidget } from '@squeletteapp/widget-react';

function CustomButton() {
  const widget = useFeedbackWidget('your-workspace', 'feature-requests', {
    buttonSelector: '#my-feedback-button',
    theme: 'light',
    position: 'top',
    onLoad: () => console.log('Widget loaded'),
    onOpenChange: (isOpen) => console.log('Widget open:', isOpen),
  });

  return (
    <button id="my-feedback-button">
      Custom Feedback Button
    </button>
  );
}

API

Components

<FeedbackWidget>

• workspaceSlug: string - Your workspace slug
• boardSlug?: string - Board slug (optional)
• theme?: 'light' | 'dark' - Widget theme
• position?: 'top' | 'bottom' | 'left' | 'right' - Widget position
• onLoad?: () => void - Called when widget loads
• onOpenChange?: (isOpen: boolean) => void - Called when widget opens/closes
• className?: string - CSS class for the button
• children: ReactNode - Button content

<RoadmapWidget>

Same props as FeedbackWidget, but boardSlug is required.

<ChangelogWidget>

Same props as FeedbackWidget, but no boardSlug prop.

Hooks

useFeedbackWidget(workspaceSlug, boardSlug, options)

useRoadmapWidget(workspaceSlug, boardSlug, options)

useChangelogWidget(workspaceSlug, options)

useWidget(options)

All hooks return a widget instance with a destroy() method, or null if not initialized.

TypeScript

This package includes full TypeScript support with proper type definitions.

Development

Built with esbuild for fast compilation and optimized bundles. Supports both CommonJS and ESM formats.