# @preview-kit/react
A flexible comment and feedback widget that can be used both as a React component library and as a vanilla JavaScript widget.
## 📦 Installation
### As a React Library (NPM Package)
```bash
npm install @preview-kit/react
# or
pnpm add @preview-kit/react
# or
yarn add @preview-kit/react
```
### As a Vanilla JavaScript Widget
Download the prebuilt JavaScript file or use a CDN:
```html
```
## 🚀 Usage
### React Library Usage
```tsx
import { PreviewKitWidget, ThemeProvider } from "@preview-kit/react"
function App() {
return (
)
}
```
#### Advanced React Usage
```tsx
import {
PreviewKitWidget,
ThemeProvider,
ShortcutProvider,
useAppStore,
} from "@preview-kit/react"
function MyComponent() {
const { comments, addComment } = useAppStore()
return (
{
console.log("New comment:", comment)
}}
/>
)
}
```
### Vanilla JavaScript Usage
The vanilla JavaScript version automatically mounts the widget:
```html
My Website
My Website
Content goes here...
```
## 📋 API Reference
### React Components
#### ``
Main widget component for React applications.
**Props:**
| Prop | Type | Required | Description |
| -------------- | -------------------------------------------------------------- | -------- | ----------------------------------------- |
| `apiUrl` | `string` | Yes | Your PreviewKit API endpoint |
| `projectId` | `string` | Yes | Your project identifier |
| `theme` | `'light' \| 'dark' \| 'auto'` | No | Widget theme (default: 'auto') |
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | No | Widget position (default: 'bottom-right') |
| `onCommentAdd` | `(comment: Comment) => void` | No | Callback when comment is added |
### Vanilla JavaScript API
#### Global Methods
| Method | Description |
| -------------------------------------- | ------------------------ |
| `window.PreviewKit.show()` | Show the widget |
| `window.PreviewKit.hide()` | Hide the widget |
| `window.PreviewKit.toggle()` | Toggle widget visibility |
| `window.PreviewKit.configure(options)` | Update configuration |
#### Events
| Event | Payload | Description |
| ------------------ | --------- | -------------------------- |
| `previewkit:ready` | `null` | Widget is loaded and ready |
| `comment:add` | `Comment` | New comment was added |