Reaction

>= v1.13

Reaction component.

Reaction, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->reaction()
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

# Concept

Version 1.13.0 of TallStackUI introduces a new component: Reaction. In the modern world many applications have blogs, posts or articles. This way they need to capture the reaction of their readers to feel how welcome or hated that content was. The reaction component is the combination of the Tooltip component with emoji icons offered by the Noto Emoji Animation project.

# Persist Reaction

The logic for persisting the reaction in a database, such as SQL, SQLite or Redis (cache) is up to its own algorithm. When an emoji is pressed, the react method is triggered, receiving the name of the reaction as a parameter.

use Livewire\Component;
 
class MyComponent extends Component
{
    public function react(string $reaction) 
    {
        // Your logic here...
 
        // $reaction will be thumbs-up, thumbs-down, the emoji name.
    }
}

You can change the method that will receive the reaction using the react-method parameter directly in the component:

<x-reaction react-method="reacting" />

# Basic Usage

<x-reaction />

# Animated Style

An option to use GIF format instead of PNG.

<x-reaction animated />

# Tooltip Position

<!-- Accept all positions of Tooltip component -->
 
<x-reaction position="top" />

# Quantity Slot

An option for show the currently quantity of reactions.

<x-reaction :quantity="12" />

You can bind a property for real-time updates:

<!-- $quantity is an integer Livewire public property -->
 
<x-reaction wire:model="quantity" :$quantity />

# Using Less Icons

<!-- Available:
 
    'smile',
    'laugh',
    'love',
    'screaming',
    'rage',
    'pray',
    'thumbs-up',
    'thumbs-down',
    'heart',
    'broken-heart',
    'clap',
    'rocket',
    'fire',
    'mind-blown',
    'sick',
    'poop',
    'eyes',
    'party-popper',
    'clown',
    'check-mark' -->
 
<x-reaction :only="['thumbs-up', 'thumbs-down', 'heart']" />

# Slot

<x-reaction>
    React to the TallStackUI
</x-reaction>

# Events

<x-reaction x-on:react="alert(`Reacted: ${$event.detail.reaction.reaction}`)" />