About Livewire Modal Twitter

Livewire component that provides a modal like on Twitter. Also, it supports images gallery with content or without.

Alt text

Installation

To get started, require the package via Composer:

composer require lao9s/livewire-modal-twitter

Livewire directive

Add the Livewire directive @livewire('livewire-modal-twitter') and also the Javascript @livewireModalTwitterScript directive to your template.


<html>
<body>
<!-- your content -->

@livewire('livewire-modal-twitter')
@livewireModalTwitterScript
</body>
</html>

Next you will need to publish the required scripts with the following command:

php artisan vendor:publish --tag=livewire-modal-twitter:public --force

Alpine

Livewire Modal Twitter requires Alpine. You can use the official CDN to quickly include Alpine:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

TailwindCSS

This modal is made with TailwindCSS. You can use the official CDN to quickly include TailwindCSS:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

If you use a different CSS framework I recommend that you publish the modal templates and change the markup to include the required classes for your CSS framework.

php artisan vendor:publish --tag=livewire-modal-twitter:views

Creating modal

You can run php artisan make:livewire ShowPost to make the initial Livewire component. Open your component class and make sure it extends the ModalTwitterComponent class:

<?php

namespace App\Http\Livewire;

use Lao9s\LivewireModalTwitter\Component\ModalTwitterComponent;

class ShowPost extends ModalTwitterComponent
{
    public function mount()
    {
        // Set images with the method setImages()
        $this->setImages([asset('img/1.jpg')]);
    }
    
    public function render()
    {
        return view('livewire.show-post');
    }
}

If you need to load data inside of your livewire component, you need to use method dispatch() instead mount(), also for display preloading you has in hasLoading() return to true:

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Facades\Http;
use Lao9s\LivewireModalTwitter\Component\ModalTwitterComponent;

class ShowPost extends ModalTwitterComponent
{
    public static function hasLoading(): bool
    {
        return true;
    }
    
    public function dispatch(): void
    {
        $request = Http::get('/api/post');
        // Set images with the method setImages()
        $this->setImages($request['images']);
    }
    
    public function render()
    {
        return view('livewire.show-post');
    }
}

Blade

In your blade Livewire component show-post.blade.php, you has to use standard laravel component livewire-modal-twitter::dialog:

<x-livewire-modal-twitter::dialog :images="$images">
    Your content
    
    <x-slot name="toolbar">
        This is toolbar
    </x-slot>
</x-livewire-modal-twitter::dialog :images="$images">

Opening a modal

To open a modal you will need to emit an event. To open the ShowPost modal for example:

<!-- Outside of any Livewire component -->
<button onclick="Livewire.emit('openModalTwitter', 'show-post')">Show Post</button>

<!-- Inside existing Livewire component -->
<button wire:click="$emit('openModalTwitter', 'show-post')">Show Post</button>

Passing parameters

You can pass parameters like images or post_id:

<!-- Outside of any Livewire component -->
<button onclick='Livewire.emit("openModalTwitter", "show-post", {{ json_encode(["post_id" => $post->id]) }})'>Show Post</button>

<!-- Inside existing Livewire component -->
<button wire:click='$emit("openModalTwitter", "show-post", {{ json_encode(["post_id" => $post->id]) }})'>Show Post</button>

The parameters are passed to the mount method on the modal component:

<?php

namespace App\Http\Livewire;

use Lao9s\LivewireModalTwitter\Component\ModalTwitterComponent;

class ShowPost extends ModalTwitterComponent
{
    public function mount($post_id)
    {  
       // Your logic
    }

    public function render()
    {
        return view('livewire.show-post');
    }
}

Security

If you are new to Livewire, I recommend to take a look at the security details. In short, it's very important to validate all information given Livewire stores this information on the client-side, or in other words, this data can be manipulated.

Credits

License

Livewire Modal Twitter is open-sourced software licensed under the MIT license.

Livewire Modal Twitter Laravel Package