New version 1.30.0 is now available 🎉 Introducing a useful command to search for component usage.

Powerful suite of Blade components for TALL Stack apps.

Reaction

>= v1.13

Reaction component.

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.

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" />
<x-reaction />

An option to use GIF format instead of PNG.

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

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 />
<!-- 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']" />
<x-reaction>
React to the TallStackUI
</x-reaction>
<x-reaction x-on:react="alert(`Reacted: ${$event.detail.reaction.reaction}`)" />

Code highlighting provided by Torchlight