# Reactions

You can enable any number of reactions on both sides, left and right. By default following reactions have set.

* Like
* Dislike
* Happy
* Love
* Sad

### Defining Reactions

```php
// commenter.php

'reactions' => [
// Fill color is displayed after the current user reacted.
  'angry' => ['position' => 'left', 'fill' => 'yellow'];
]
```

### Set Icons Using Emojis

You can define relevant emoji under **icon** key in the **reactions** array of Commenter config file.

```
// commenter.php

'reactions' => [
        'sad' => [
        'position' => 'right',
        'icon' => [
          'plain' => '☹', 
          'filled' => '😢'
          ] 
         ],
    ],
```

### Set Icons Using Blade Files

#### Publish views

```bash
php artisan vendor:publish --tag=commenter-views
```

Create a blade file with the same name as the reaction name and include the icon in it in the following directory.

```
// Followig create the angry reaction

|--resources
   |--views 
      |--vendor
        |--lakm
            |--commenter
               |--components
                  |--icons
                     |--angry.blade.php
```

`$filled` variable is provided to these blade files. So that you can use it appropriately. 

```
@props(['fill' => 'none'])

@if($fill === 'none')
<svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="{{ $fill }}"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    {{ $attributes->merge(['class' => '']) }}
>
    <circle cx="12" cy="12" r="10" />
    <path d="M18 13a6 6 0 0 1-6 5 6 6 0 0 1-6-5h12Z" />
    <line x1="9" x2="9.01" y1="9" y2="9" />
    <line x1="15" x2="15.01" y1="9" y2="9" />
</svg>
@else
    😄
@endif

```