Svelte Reactions 🙂
A siimple and pretty component to add reactions in your application
## 🚀 Install
Using npm
```bash
npm i svelte-reactions
```
Or using yarn
```bash
yarn add svelte-reactions
```
## 🤔 Usage
Using js
```html
```
Using ts
```html
```
### For more expamples go to the [REPL](https://svelte.dev/repl/ca9025e2d4084b6fa6040eb61fafe643?version=3.49.0)
## 🎨 Theming
We expose some CSS Variables to make more easy customize the colors of the component:
| Variable | Description |
| :------- | ----------: |
| --srTriggerBg | Define the background color of default Trigger component |
| --srTriggerColor | Define the text color of default Trigger component |
| --srTriggerHoverBg | Define the background hover color of default Trigger component |
| --srTriggerContainerBoxShadow | Define the style box shadow of the reactions container |
| --srTriggerContainerBg | Define the background color of the reactions container |
| --srReactionClickedBg | Define the background color of reaction block when this is already clicked |
| --srReactionNotClickedBg | Define the background color of reaction block when this is not already clicked |
| --srReactionHoverBg | Define the background hover color of reaction block |
| --srReactionClickedHoverBg | Define the background hover color of reaction block when this is already clicked |
| --srEmojiColor | Define the text color of reaction |
| --srEmojiClickedColor | Define the text color of reaction when this is already clicked |
| --srLabelBorderColor | Define the border color of default label component |
| --srLabelClickedBorderColor | Define the border color of default label component when reaction is already clicked |
| --srLabelBg | Define the background color of default label component |
| --srLabelClickedBg | Define the background color of default label component when reaction is already clicked |
| --srLabelColor | Define the text color of default label component |
| --srLabelClickedColor | Define the text color of default label component when reaction is already clicked |
| --srLabelHoverBg | Define the background hover color of default label component |
| --srLabelClickedHoverBg | Define the background hover color of default label component when reaction is already clicked |
Then you can use this variables to customize the component, for example:
```html
```
If you need to be more strict, always you can overwrite the next classes to get the better result:
| Class name | Description |
| :------- | ----------: |
| .trigger-container | Default class for default trigger and labels container |
| .trigger | Default class for default trigger element |
| .reactions-container| Default class for the reactions contanier (floating component) |
| .reaction | Default class for the reaction element |
| .emoji | Default class for the emoji element |
| .labels-container | Deault class for the labels container |
| .label | Default class for the label element |
| .label-component | Default class for the label element, when the reaction is defined as SvelteComponent insted of String |
**Remember alway use global styles for overwriting CSS variables and classes**
## 📂 API
### ReactionType attributes
| Property | Type | Description |
| :------- | :--: | ----------: |
| `id` | string | Identifier of a reaction, useful for bind data with your database. |
| `reaction` | string \| SvelteComponent | You can use any `string` for a reaction, however we recomend you to use a string with 1 value of lenght, when you use an `SvelteComponent` as reaction, components like `svg` or `img` or any other, we recomend you to use this sizes: `width` between `20px` and `35px` same as height. |
| `labelReaction` | string \| SvelteComponent \| undefined | Same as `reaction` property, this define the reaction representation on summary labels (by default this value is equal to provided `reaction` value |
| `quantity` | number | Define the quantity of reactions, for example 50 likes in some post. |
| `clicked` | boolean | Define if the current user clicked some reaction. |
### Placment type
This type is used on the `` component props, for example:
```html
```
valid values:
`'bottom-left' | 'top-left' | 'bottom-right' | 'top-right'`
### Trigger properties
| Property | Type | Description |
| :------- | :--: | ----------: |
| `reactions` | ReactionType[] | Define the set of reactions. |
| `showLabels` | boolean | Define if the component generate summary of reactionis. |
| `position` | Placement | Define the placement of the reactions containers. |
| `on:reaction` | CustomEvent | Throw an event when some reaction is clicked |
