npm package: @happyreact/vue
Description: HappyReact widget for Vue 3
Author: HappyReact
Latest version: 0.1.1

# Vue 3 feedback widget - Powered by Happy React

[Happy React](https://happyreact.com/) is a feedback widget for your documentation sites. Work with all documentation generators and frameworks!

This package is one of [Happy React integrations](https://happyreact.com/docs/recipes). If you want to know more please visit our [documentation page](https://happyreact.com/docs).

## Features

- Headless styling (with or without basic constraints)
- Easy integration with many frameworks
- Dashboard with statistics and extensive settings

## Installation

Using [npm](https://docs.npmjs.com/)

```bash
npm install @happyreact/vue
```

Using [yarn](https://yarnpkg.com/)

```bash
yarn add @happyreact/vue
```

Using [pnpm](https://pnpm.io/)

```bash
pnpm add @happyreact/vue
```

## Usage

First, you need to [create a Happy React project](https://happyreact.com/docs/get-started). You will get a token to connect the widget with Happy React.
There you can change project settings, add domains to the whitelist, or see statistics.

### Displaying widget with basic styling

This code lets you add the widget to your website with the basic styling that comes with the package.

```vue
<script setup>
import { Widget } from "@happyreact/vue";
import "@happyreact/vue/theme.css";
</script>

<template>
  <Widget token="[token]" resource="users-happiness" />
</template>
```

- `[token]` - project token, find it in dashboard project settings
- `users-happiness` - unique identifier of resource

<hr />

### Custom styles using Global CSS

Use this if your application allows importing global styles. You can use default classes to style widget elements.

```vue
<script setup>
import { Widget } from "@happyreact/vue";
import "@happyreact/vue/theme.css";
</script>

<template>
  <Widget token="[token]" resource="users-happiness" />
</template>

<style>
.hr-container {
}

.hr-reaction {
}
</style>
```

If you want to know more about styling you can find it in [Happy React styling](https://happyreact.com/docs/styles) guide.

> 💡 Remember to replace `token` and `resource` with your project's token and proper resource

<hr />

### Custom styles using classes

Use this with Module CSS. Import styles as a variable and assign them using `classes` property.
This can let you add class to different elements of the widget.

```vue
<script setup>
import { Widget } from "@happyreact/vue";
import "@happyreact/vue/theme.css";
</script>

<template>
  <Widget
    token="[token]"
    resource="users-happiness"
    :classes="{
      container: $style.container,
      reaction: $style.reaction,
    }"
  />
</template>

<style module>
.container {
}

.reaction {
}
</style>
```

If you want to know more about styling you can find it in [Happy React styling](https://happyreact.com/docs/styles) guide.

> 💡 Remember to replace `token` and `resource` with your project's token and proper resource

<hr />

### Reacting to user events (pun intended)

Right now you can use two events:

- `onReaction` - fire after user reaction
- `onReactionsLimitReached` - fire after user reach limit of reactions

```vue
<script setup>
// FeedbackWidget.vue
import { Widget } from "@happyreact/vue";
import "@happyreact/vue/theme.css";

export default {
  methods: {
    handleReaction(data) {
      console.log("Reaction clicked with data", data);
    },
    handleReactionsLimitReached(data) {
      console.log("Reactions limit reached");
    },
  },
};
</script>

<template>
  <Widget
    token="[token]"
    resource="users-happiness"
    :onReaction="handleReaction"
    :onReactionsLimitReached="handleReactionsLimitReached"
  />
</template>
```

## `Widget` Component

The `Widget` component lets you display a feedback widget with reactions and settings.
Control these settings on [Happy React dashboard](https://app.happyreact.com).

### Required props

| Prop       | Type     | Description                          |
| :--------- | :------- | :----------------------------------- |
| `token`    | `string` | Token of your project                |
| `resource` | `string` | <br /> Unique identifier of resource |

### Optional props

| Prop                      | Default                      | Type                                                                                                                                                                                 | Description                                                                                                              |
| :------------------------ | :--------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- |
| `classes`                 |                              | `string \| ` <br /> `{ root?: string; container?: string; grid?: string; cell?: string; reaction?: string; reactionActive?: string; reactionIcon?: string; reactionText?: string; }` | Classes applied to widget elements. You can find them on [Happy React styling guide](https://happyreact.com/docs/styles) |
| `url`                     | `https://app.happyreact.com` | `string`                                                                                                                                                                             | Url where should widget get data. Used when you have own Happy React instance                                            |
| `onReaction`              |                              | `(data: { id: string; icon: string; }) => void`                                                                                                                                      | Event fired when user click reaction                                                                                     |
| `onReactionsLimitReached` |                              | `() => void`                                                                                                                                                                         | Event fired when user reach reactions limit                                                                              |

# Learn more

You can find more integrations on [Happy React documentation](https://happyreact.com/docs).

# License

This package is licensed under MIT License