README

Package to generate interactions in a Laravel application with Livewire.

REQUIREMENTS

INSTALLATION VIA COMPOSER

Step 1: Composer

Run this command line in console.

composer require tonystore/livewire-interactions

Step 2: Publish Assets

Publish Config File

php artisan vendor:publish --provider="Tonystore\LivewireInteraction\LivewireInteractionProvider" --tag=config-interaction

Publish Lang

Publish the translations in case you wish to modify any of them.

php artisan vendor:publish --provider="Tonystore\LivewireInteraction\LivewireInteractionProvider" --tag=langs-interaction

Usage

By default, Bootstrap is the default theme to use for the follow component.But you can switch to Tailwind.

<?php
return [
	/*
	 * Supported Theme: 'bootstrap', 'tailwind'.
	 */
	'theme'  =>  'bootstrap',
];

You can customize the default styles applied to the follow component by following the instructions below.

<?php
return [
    'bootstrap' => [ // Bootstrap styles
        'btn' => [
            'follow_class' => 'btn btn-info btn-sm',
            'unfollow_class' => 'btn btn-danger btn-sm'
            ],
        'icon' => [
            'follow_icon' => 'fas fa-user-plus',
            'unfollow_icon' => 'fas fa-user-xmark'
            ]
        ],
    ];

To use the follow and unfollow component, you can add it anywhere in your code as follows:

 <body> 

    //INSERT COMPONENT
    <livewire:follow :user="$user" :wire:key="$user->id" />

    //OR BLADE DIRECTIVE
    @livewire('follow', ['user' => $jugador], key($user->id))
  
    //The user parameter is mandatory.
 </body>

You can also customize the styles to be used directly in a component, passing as parameters the new settings to be used.

<div>
     <livewire:follow 
     :user="$user"                          //User to follow
     :follow_class="btn btn-block btn-lg"   //Classes for follow button.
     :unfollow_class="btn btn-block btn-lg" //Classes for unfollowing button
     :follow_icon="btn btn-block btn-lg"    //Classes for icon to follow.
     :unfollow_icon="btn btn-block btn-lg"  //Classes to icon unfollowing
     :only_icon="btn btn-block btn-lg"      //Show only the icon, without a description
     />
</div>

tonystore / livewire-interactions

Maintainers

Details