### Install React Canny

Source: https://github.com/kearisp/react-canny/blob/master/README.md

Install the react-canny package using npm.

```bash
npm install react-canny
```

--------------------------------

### Install react-canny

Source: https://context7.com/kearisp/react-canny/llms.txt

Install the react-canny package and its peer dependency, react.

```bash
npm install react-canny
# peer dependency
npm install react
```

--------------------------------

### Basic CannyProvider Usage

Source: https://context7.com/kearisp/react-canny/llms.txt

Use CannyProvider to wrap components that utilize Canny features. This basic example does not include user identification.

```tsx
import React from "react";
import { CannyProvider } from "react-canny";

const APP_ID = "6123abc456def7890";

// Basic usage — no user identification
export const AppBasic = () => (
  <CannyProvider appId={APP_ID}>
    <MyPage />
  </CannyProvider>
);
```

--------------------------------

### CannyFeedback with Custom Wrapper

Source: https://context7.com/kearisp/react-canny/llms.txt

Customize the container element for the CannyFeedback widget using the 'component' prop. This example uses a 'section' element.

```tsx
import React from "react";
import { CannyProvider, CannyFeedback } from "react-";

const APP_ID = "6123abc456def7890";
const BOARD_TOKEN = "a1b2c3d4-e5f6-7890-abcd-ef1234567890";

// Using a custom wrapper element
export const FeedbackSection = () => (
  <CannyProvider appId={APP_ID}>
    <CannyFeedback
      component="section"
      boardToken={BOARD_TOKEN}
      basePath="/feedback"
      className="feedback-container"
    />
  </CannyProvider>
);
```

--------------------------------

### Load Canny SDK Manually with CannyLoader

Source: https://context7.com/kearisp/react-canny/llms.txt

Demonstrates how to manually load the Canny SDK using the CannyLoader utility. This is useful for advanced scenarios outside of the CannyProvider. Ensure the scriptId and URL are correct.

```typescript
import { CannyLoader } from "react-canny";

// Load the Canny SDK manually (CannyProvider does this automatically)
async function loadCannySDK() {
  try {
    await CannyLoader.load("canny-jssdk", "https://canny.io/sdk.js");
    console.log("Canny SDK loaded");
  } catch (err) {
    console.error("Failed to load Canny SDK:", err);
  }
}
```

--------------------------------

### Canny Class (Low-Level API)

Source: https://context7.com/kearisp/react-canny/llms.txt

The `Canny` class provides a low-level interface to the Canny SDK, acting as a queue-backed wrapper around `window.Canny`. It buffers calls made before the SDK loads and flushes them once ready, allowing direct interaction for advanced use cases.

```APIDOC
## `Canny` class (low-level)

The `Canny` class is a thin queue-backed wrapper around the global `window.Canny` SDK. It buffers calls made before the SDK script loads and flushes them once it's ready. Advanced consumers who need to bypass the React components can instantiate and use this class directly.

### Methods:
- `identify(appId, user, callback)`: Identifies a user with Canny.
- `render(options)`: Renders the feedback board.
- `initChangelog(options)`: Initializes the changelog popup.
- `closeChangelog()`: Closes the changelog popup programmatically.
- `authenticateCannyLink(url)`: Generates an SSO-authenticated link.
- `flush()`: Manually flushes queued calls after the SDK loads.
```

--------------------------------

### CannyLoader.load

Source: https://context7.com/kearisp/react-canny/llms.txt

Loads the Canny SDK by injecting a script tag into the document head. It deduplicates concurrent load requests for the same scriptId and returns a Promise that resolves when the script is loaded. This is used internally by CannyProvider but can be called directly for manual SDK loading.

```APIDOC
## `CannyLoader.load(scriptId, src)`

### Description
Injects a `<script>` tag into `document.head` and returns a `Promise` that resolves when the script loads. It deduplicates concurrent load requests for the same `scriptId`.

### Method
`CannyLoader.load(scriptId: string, src: string): Promise<void>`

### Parameters
#### Path Parameters
- **scriptId** (string) - Required - A unique identifier for the script.
- **src** (string) - Required - The URL of the script to load.

### Request Example
```typescript
import { CannyLoader } from "react-canny";

async function loadCannySDK() {
  try {
    await CannyLoader.load("canny-jssdk", "https://canny.io/sdk.js");
    console.log("Canny SDK loaded");
  } catch (err) {
    console.error("Failed to load Canny SDK:", err);
  }
}

async function safeMultipleLoads() {
  const [r1, r2] = await Promise.all([
    CannyLoader.load("canny-jssdk", "https://canny.io/sdk.js"),
    CannyLoader.load("canny-jssdk", "https://canny.io/sdk.js")
  ]);
  // Both resolve from the same underlying Promise
}
```

### Response
#### Success Response
A Promise that resolves when the script has successfully loaded.

#### Response Example
```typescript
// Promise resolves with no specific value upon successful load
```
```

--------------------------------

### CannyFeedback Widget Configuration

Source: https://context7.com/kearisp/react-canny/llms.txt

Render an embedded Canny feedback board using the CannyFeedback component. It accepts boardToken, basePath, ssoToken, and theme props. An onLoadCallback is available for post-load actions.

```tsx
import React from "react";
import { CannyProvider, CannyFeedback } from "react-canny";

const APP_ID = "6123abc456def7890";
const BOARD_TOKEN = "a1b2c3d4-e5f6-7890-abcd-ef1234567890";
const SSO_TOKEN = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";

export const FeedbackPage = () => (
  <CannyProvider appId={APP_ID}>
    <CannyFeedback
      boardToken={BOARD_TOKEN}
      basePath="/feedback"
      ssoToken={SSO_TOKEN}
      theme="light"
      onLoadCallback={() => console.log("Feedback board loaded")}
      style={{ minHeight: 600 }}
    />
  </CannyProvider>
);
```

--------------------------------

### CannyProvider

Source: https://context7.com/kearisp/react-canny/llms.txt

The root context provider that loads the Canny SDK script and optionally identifies the logged-in user. Must wrap all other react-canny components.

```APIDOC
## CannyProvider

### Description
The root context provider that loads the Canny SDK script and optionally identifies the logged-in user. Must wrap all other `react-canny` components. It accepts an `appId` (required), optional `user` object for Canny Identify, `subdomain`/`domain` overrides for custom Canny deployments, and an `onIdentify` callback fired once identification completes.

### Props (`CannyProviderProps`)
#### Path Parameters
- **appId** (string) - Required - Canny application ID.
- **user** (object) - Optional - User object for Canny Identify. Should contain `id`, `name`, `email`, `avatarURL`, and `created` properties.
- **subdomain** (string) - Optional - Custom subdomain for Canny deployment.
- **domain** (string) - Optional - Custom domain for Canny deployment.
- **onIdentify** (function) - Optional - Callback function fired after user identification.

### Request Example
```tsx
import React from "react";
import { CannyProvider } from "react-canny";

const APP_ID = "6123abc456def7890";

// Basic usage — no user identification
export const AppBasic = () => (
  <CannyProvider appId={APP_ID}>
    <MyPage />
  </CannyProvider>
);

// With user identification
const currentUser = {
  id: "user-42",
  name: "Jane Doe",
  email: "jane@example.com",
  avatarURL: "https://example.com/avatars/jane.png",
  created: new Date("2022-06-01").toISOString()
};

export const AppWithUser = () => (
  <CannyProvider
    appId={APP_ID}
    user={currentUser}
    onIdentify={() => console.log("Canny user identified")}
  >
    <MyPage />
  </CannyProvider>
);

// With custom subdomain
export const AppWithSubdomain = () => (
  <CannyProvider appId={APP_ID} subdomain="my-company">
    <MyPage />
  </CannyProvider>
);
```
```

--------------------------------

### CannyFeedback

Source: https://context7.com/kearisp/react-canny/llms.txt

Renders an embedded Canny feedback board widget inside a container element.

```APIDOC
## CannyFeedback

### Description
Renders an embedded Canny feedback board widget inside a container element. Internally it calls `Canny("render", ...)` when the SDK is loaded and re-renders whenever `boardToken`, `ssoToken`, `basePath`, or `theme` props change. The default container is a `<div>` but can be replaced with any HTML element or React component via the `component` prop.

### Props (`CannyFeedbackProps`)
#### Path Parameters
- **boardToken** (string) - Required - Canny board token.
- **basePath** (string | null) - Optional - URL base path for the board.
- **ssoToken** (string) - Optional - JWT SSO token for authenticated users.
- **theme** ("auto" | "light" | "dark") - Optional - Widget color theme.
- **onLoadCallback** (function) - Optional - Called after the widget loads.
- **component** (ElementType) - Optional - Container element (default: `"div"`).

### Request Example
```tsx
import React from "react";
import { CannyProvider, CannyFeedback } from "react-canny";

const APP_ID = "6123abc456def7890";
const BOARD_TOKEN = "a1b2c3d4-e5f6-7890-abcd-ef1234567890";
const SSO_TOKEN = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";

export const FeedbackPage = () => (
  <CannyProvider appId={APP_ID}>
    <CannyFeedback
      boardToken={BOARD_TOKEN}
      basePath="/feedback"
      ssoToken={SSO_TOKEN}
      theme="light"
      onLoadCallback={() => console.log("Feedback board loaded")}
      style={{ minHeight: 600 }}
    />
  </CannyProvider>
);

// Using a custom wrapper element
export const FeedbackSection = () => (
  <CannyProvider appId={APP_ID}>
    <CannyFeedback
      component="section"
      boardToken={BOARD_TOKEN}
      basePath="/feedback"
      className="feedback-container"
    />
  </CannyProvider>
);
```
```

--------------------------------

### Feedback Widget Integration

Source: https://github.com/kearisp/react-canny/blob/master/README.md

Integrate the Canny feedback widget by wrapping your app with CannyProvider and rendering the CannyFeedback component. Ensure your Canny app ID, board token, and SSO token are correctly provided.

```jsx
import {
    CannyProvider,
    CannyFeedback
} from "react-canny";


const APP_ID = "/* Your app id */";
const BOARD_TOKEN = "/* Tour token board */";
const SSO_TOKEN = "/* Your sso token */";

const App = () => {
    return (
        <CannyProvider appId={APP_ID}>
            <CannyFeedback
              basePath="/feedback"
              boardToken={BOARD_TOKEN}
              ssoToken={SSO_TOKEN} />
        </CannyProvider>
    );
};

```

--------------------------------

### CannyProvider with Custom Subdomain

Source: https://context7.com/kearisp/react-canny/llms.txt

Override the default Canny deployment subdomain by providing the 'subdomain' prop to CannyProvider.

```tsx
import React from "react";
import { CannyProvider } from "react-canny";

const APP_ID = "6123abc456def7890";

// With custom subdomain
export const AppWithSubdomain = () => (
  <CannyProvider appId={APP_ID} subdomain="my-company">
    <MyPage />
  </CannyProvider>
);
```

--------------------------------

### User Identification with CannyProvider

Source: https://github.com/kearisp/react-canny/blob/master/README.md

Automatically identify users by providing user details (id, name, email) to the CannyProvider. An optional onIdentify callback can be used for custom logic after identification.

```jsx
import { CannyProvider } from "react-canny";

const APP_ID = "/* Your app id */";

const USER = {
    id: "/* User id */",
    name: "/* User name */",
    email: "/* User email */"
};

const App = () => {
    const onIdentify = () => {
        /* An optional callback */
    };

    return (
        <CannyProvider
          appId={APP_ID}
          user={USER}
          onIdentify={onIdentify} />
    );
};

```

--------------------------------

### CannyProvider with User Identification

Source: https://context7.com/kearisp/react-canny/llms.txt

Configure CannyProvider to identify the current user by passing a user object. An optional onIdentify callback can be provided.

```tsx
import React from "react";
import { CannyProvider } from "react-canny";

const APP_ID = "6123abc456def7890";

// With user identification
const currentUser = {
  id: "user-42",
  name: "Jane Doe",
  email: "jane@example.com",
  avatarURL: "https://example.com/avatars/jane.png",
  created: new Date("2022-06-01").toISOString()
};

export const AppWithUser = () => (
  <CannyProvider
    appId={APP_ID}
    user={currentUser}
    onIdentify={() => console.log("Canny user identified")}
  >
    <MyPage />
  </CannyProvider>
);
```

--------------------------------

### Render Canny Changelog with Default Button

Source: https://context7.com/kearisp/react-canny/llms.txt

Use CannyChangelog to render a default button that opens the Canny Changelog popup. Configure alignment, position, theme, and filter by label IDs.

```tsx
import React from "react";
import { CannyProvider, CannyChangelog } from "react-canny";

const APP_ID = "6123abc456def7890";
const LABEL_IDS = ["label-id-abc123", "label-id-def456"];

// Default button trigger
export const NavBar = () => (
  <CannyProvider appId={APP_ID}>
    <nav>
      <CannyChangelog
        align="bottom"
        position="right"
        theme="auto"
        labelIDs={LABEL_IDS}
        className="changelog-btn"
      >
        What's New
      </CannyChangelog>
    </nav>
  </CannyProvider>
);
```

--------------------------------

### Low-level Canny Class Usage

Source: https://context7.com/kearisp/react-canny/llms.txt

Instantiate the Canny class directly for advanced use cases bypassing React components. It buffers calls until the SDK loads and provides methods for identifying users, rendering widgets, and managing the changelog.

```ts
import { Canny } from "react-canny";

const canny = new Canny();

// Identify a user (queued until SDK loads)
canny.identify("6123abc456def7890", {
  id: "user-42",
  name: "Jane Doe",
  email: "jane@example.com",
  avatarURL: "https://example.com/avatars/jane.png",
  created: new Date("2022-06-01").toISOString()
}, () => {
  console.log("Identified!");
});

// Render feedback board
canny.render({
  boardToken: "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  basePath: "/feedback",
  theme: "light"
});

// Initialize changelog popup
canny.initChangelog({
  appID: "6123abc456def7890",
  align: "bottom",
  position: "right",
  theme: "auto",
  labelIDs: ["label-abc123"]
});

// Close changelog popup programmatically
canny.closeChangelog();

// Generate authenticated link (returns original URL if SDK not loaded)
const url = canny.authenticateCannyLink("https://my-company.canny.io");
console.log(url); // SSO-authenticated URL string

// Manually flush queued calls after SDK loads
canny.flush();
```

--------------------------------

### Safe Multiple Loads with CannyLoader

Source: https://context7.com/kearisp/react-canny/llms.txt

Illustrates how CannyLoader safely handles multiple concurrent load requests for the same script. It ensures that only one script tag is injected and returns the same Promise for all identical requests, preventing duplicate loads.

```typescript
// Calling load() multiple times with the same scriptId is safe —
// the same Promise is returned without injecting a duplicate script tag.
async function safeMultipleLoads() {
  const [r1, r2] = await Promise.all([
    CannyLoader.load("canny-jssdk", "https://canny.io/sdk.js"),
    CannyLoader.load("canny-jssdk", "https://canny.io/sdk.js")
  ]);
  // Both resolve from the same underlying Promise
}
```

--------------------------------

### Use useCannyContext for Authenticated Links

Source: https://context7.com/kearisp/react-canny/llms.txt

The useCannyContext hook provides access to Canny's SDK state and methods. Use it to conditionally render authenticated links by calling canny.authenticateCannyLink.

```tsx
import React from "react";
import { CannyProvider, useCannyContext } from "react-canny";

const APP_ID = "6123abc456def7890";
const CANNY_BOARD_URL = "https://my-company.canny.io/feature-requests";

// Authenticated Canny link — only rendered once SDK is loaded
const AuthenticatedCannyLink: React.FC<{ href: string; children: React.ReactNode }> = ({ href, children }) => {
  const { canny, isLoaded, isIdentified } = useCannyContext();

  if (!isLoaded) {
    return <span>Loading...</span>;
  }

  // authenticateCannyLink returns the SSO-authenticated URL
  const authenticatedUrl = canny.authenticateCannyLink(href);

  return (
    <a href={authenticatedUrl} target="_blank" rel="noreferrer">
      {children}
      {isIdentified && " (authenticated)"}
    </a>
  );
};

export const FeedbackLink = () => (
  <CannyProvider
    appId={APP_ID}
    user={{ id: "user-42", name: "Jane Doe", email: "jane@example.com" }}
  >
    <AuthenticatedCannyLink href={CANNY_BOARD_URL}>
      Submit Feedback
    </AuthenticatedCannyLink>
  </CannyProvider>
);
```

--------------------------------

### CannyChangelog Component

Source: https://context7.com/kearisp/react-canny/llms.txt

Renders a changelog trigger button or custom element that opens the Canny Changelog popup. It automatically initializes the changelog on mount and closes it on unmount. Popup alignment and position are configurable.

```APIDOC
## `CannyChangelog`

Renders a changelog trigger button (or any custom element) that opens the Canny Changelog popup when clicked. On mount it calls `Canny("initChangelog", ...)` and on unmount calls `Canny("closeChangelog")` automatically. The popup alignment and position relative to the trigger element are configurable.

### Props (`CannyChangelogProps`):
| Prop | Type | Default | Description |
|---|---|---|---|
| `align` | `"top" | "bottom" | "left" | "right"` | `"left"` | Popup alignment relative to trigger |
| `position` | `"top" | "bottom" | "left" | "right"` | `"bottom"` | Popup position relative to trigger |
| `theme` | `"auto" | "light" | "dark"` | `"auto"` | Popup color theme |
| `labelIDs` | `string[]` | — | Filter changelog by Canny label IDs |
| `component` | `ElementType` | `"button"` | Trigger element type |
```

--------------------------------

### Generate Authenticated Canny Link

Source: https://github.com/kearisp/react-canny/blob/master/README.md

Use the `useCannyContext` hook and `authenticateCannyLink` method within a custom component to generate authenticated links for Canny. This is useful when direct identification within CannyProvider is not sufficient.

```jsx
import { CannyProvider, useCannyContext } from "react-canny";

const APP_ID = "/* Your app id */";
const USER = {
    id: "/* User id */",
    name: "/* User name */",
    email: "/* User email */"
};
const CANNY_URL = 'https://my-subdomain.canny.io';

const App = () => {
    return (
        <CannyProvider appId={APP_ID} user={USER}>
            <CannyLink href={CANNY_URL}>
                Leave feedback
            </CannyLink>
        </CannyProvider>
    );
};

const CannyLink = ({ children, href }) => {
    const { canny, isLoaded } = useCannyContext();

    if(!isLoaded) {
        return null;
    }

    return (
        <a href={canny.authenticateCannyLink(href)}>{children}</a>
    );
};

```

--------------------------------

### Custom Changelog Button

Source: https://github.com/kearisp/react-canny/blob/master/README.md

Use a custom React component for the changelog button by passing it to the 'component' prop of CannyChangelog. This allows for full control over the button's styling and behavior.

```jsx
const APP_ID = "/* Your app id */";


const CustomButton = (props) => {
    return (
        <button {...props}
          type="button"
          className="my-custom-button" />
    );
};


const App = () => {
    return (
        <CannyProvider appId={APP_ID}>
            <CannyChangelog
              component={CustomButton}>
                Change Log
            </CannyChangelog>
        </CannyProvider>
    );
};

```

--------------------------------

### Render Canny Changelog with Custom Component

Source: https://context7.com/kearisp/react-canny/llms.txt

Use CannyChangelog with a custom component prop to render a custom trigger element, such as an icon, for the Canny Changelog popup. Configure alignment, position, and theme.

```tsx
import React from "react";
import { CannyProvider, CannyChangelog } from "react-canny";

const APP_ID = "6123abc456def7890";

// Custom component trigger
const BellIcon = (props: React.HTMLAttributes<HTMLSpanElement>) => (
  <span {...props} role="button" aria-label="Changelog">🔔</span>
);

export const NavBarCustom = () => (
  <CannyProvider appId={APP_ID}>
    <nav>
      <CannyChangelog
        component={BellIcon}
        align="top"
        position="left"
        theme="dark"
      >
        {/* children rendered inside the component */}
      </CannyChangelog>
    </nav>
  </CannyProvider>
);
```

--------------------------------

### useCannyContext Hook

Source: https://context7.com/kearisp/react-canny/llms.txt

A React hook that provides access to the Canny context, including `isLoaded`, `isIdentified` state flags, `appId`, and the raw `canny` instance. It's useful for creating custom components that need to interact with the Canny SDK's state or methods.

```APIDOC
## `useCannyContext`

A React hook that returns the current Canny context, including the `isLoaded` and `isIdentified` state flags, the `appId`, and the raw `canny` instance. Useful for building custom components that need to react to SDK load state or call lower-level Canny methods.
```

--------------------------------

### Changelog Widget Integration

Source: https://github.com/kearisp/react-canny/blob/master/README.md

Embed the Canny changelog widget using CannyProvider and CannyChangelog. You can customize its appearance and behavior using props like type, className, align, position, and labelIDs.

```jsx
import {
    CannyProvider,
    CannyChangelog
} from "react-canny";

const APP_ID = "/* Your app id */";
const LABEL_IDS = [/* Your label ids */];


const App = () => {
    return (
        <CannyProvider appId={APP_ID}>
            <CannyChangelog
              type="button"
              className="change-log-button"
              align="top"
              position="left"
              labelIDs={LABEL_IDS}>
                Change Log
            </CannyChangelog>
        </CannyProvider>
    );
};

```

--------------------------------

### Deprecated CannyWidget Alias

Source: https://context7.com/kearisp/react-canny/llms.txt

CannyWidget is an alias for CannyFeedback and is kept for backward compatibility. It is recommended to use CannyFeedback directly.

```tsx
// Deprecated — prefer CannyFeedback
import { CannyWidget } from "react-canny";
// CannyWidget === CannyFeedback
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.