@pagedotapp/page-reaction-picker/README.md

PageReactionPicker - A reusable React component

# PageReactionPicker

A reusable reactionpicker component for React applications.

## Installation

```bash
npm install @pagedotapp/page-reaction-picker
```

## Usage

```tsx
import { PageReactionPicker } from "@pagedotapp/page-reaction-picker"

function App() {
	return (
		<PageReactionPicker variant="primary" size="medium">
			PageReactionPicker Content
		</PageReactionPicker>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PageReactionPicker variant="default">Default</PageReactionPicker>
<PageReactionPicker variant="primary">Primary</PageReactionPicker>
<PageReactionPicker variant="secondary">Secondary</PageReactionPicker>
```

### Sizes

```tsx
<PageReactionPicker size="small">Small</PageReactionPicker>
<PageReactionPicker size="medium">Medium</PageReactionPicker>
<PageReactionPicker size="large">Large</PageReactionPicker>
```

### States

```tsx
<PageReactionPicker disabled>Disabled</PageReactionPicker>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```