TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Reaction

Reaction component.

# 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 property: 

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

# Basic Usage 

<x-reaction />
You can control some aspects of the tooltip used by the reaction component via configuration file.

# Open on hover
NEW 

<x-reaction hover />

# 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" />

# Tooltip Speed
NEW 

<!-- accept all Tooltip delays -->
 
<x-reaction delay="fast" />

# Tooltip Ballon Color
NEW 

<x-reaction balloon="red" />

# 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}`)" />
Event Detail Fired when
react { reaction: { method, reaction } } A reaction is picked

# Panel
NEW

The emoji picker is now a JavaScript generated panel instead of Tippy's default black box. Since it exists outside customize() , use [data-tsui-popover] to style it.

Code highlighting provided by Torchlight