DEV Community

Mehedi Hasan Sagor
Mehedi Hasan Sagor

Posted on

1

Introducing a Flexible and Framework-Agnostic Laravel Livewire Modal Package

Introducing a Flexible Laravel Livewire Modal Package

Laravel and Livewire have revolutionized the way we build dynamic applications with minimal JavaScript. But when it comes to handling modals, most solutions tend to lock us into specific design frameworks like Bootstrap or Tailwind CSS. What if you need the flexibility to choose your design system? That’s where my newly released Laravel Livewire Modal package comes in!

🚀 What Is This Package?

The Laravel Livewire Modal package is a framework-agnostic solution for handling modals in your Livewire projects. It’s designed to work seamlessly with Bootstrap, Tailwind CSS, or any custom styles. Whether you’re working on a brand new project or integrating into an existing one, this package adapts to your needs.

✨ Key Features

  • Framework-Agnostic: Use with Bootstrap, Tailwind CSS, or your own custom styles.
  • Easy Integration: Simple Livewire events to open and close modals.
  • Dynamic Data Handling: Pass data effortlessly to your modal components.
  • Customizable and Lightweight: No enforced styles, allowing you to maintain full control over your design.

🛠️ Installation & Setup

You can get started by installing the package via Composer:

composer require sagor110090/livewire-modal
Enter fullscreen mode Exit fullscreen mode

Next, add the following line to your app.blade.php layout file to enable modals throughout your application:

<livewire:modals/>
Enter fullscreen mode Exit fullscreen mode

Also, don’t forget to include the required JS and CSS in your resources/js/app.js:

import '../../vendor/sagor110090/livewire-modal/resources/js/loader.js';
import '../../vendor/sagor110090/livewire-modal/resources/css/loader.css';
Enter fullscreen mode Exit fullscreen mode

📦 Usage Example

Here’s how easy it is to open and close modals using this package:

Opening a Modal

<button wire:click="$dispatch('openModal', { component: 'edit-user', data: { id: {{ $user->id }} } })">
    Open Modal
</button>
Enter fullscreen mode Exit fullscreen mode

Closing a Modal

<button type="button" wire:click="$dispatch('closeModal')">
    Cancel
</button>
Enter fullscreen mode Exit fullscreen mode

Creating a Livewire Component

To get you started, here’s a sample Livewire component for editing a user:

<?php

namespace App\Livewire;

use App\Models\User;
use Livewire\Component;

class EditUser extends Component
{
    public $user;

    public function mount($id)
    {
        $this->user = User::find($id);
    }

    public function render()
    {
        return view('livewire.edit-user');
    }
}
Enter fullscreen mode Exit fullscreen mode

Customizing Your Modal Design

This package is completely design-agnostic, meaning you can use any framework to style your modals. For example, if you’re using Tailwind CSS:

<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <!-- Your Modal Content -->
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Feel free to replace the styling with Bootstrap, custom CSS, or whatever design system you prefer.

💡 Why Use This Package?

Most modal solutions are tied to specific design frameworks, limiting your flexibility. This package gives you full control over how you style your modals while providing seamless integration with Livewire’s powerful components.

Whether you’re building a large application or a simple project, this package is designed to be lightweight, flexible, and easy to use.

🚀 Get Started Today!

If you’re ready to simplify modal management in your Laravel Livewire projects, give this package a try! You can install it via Composer:

composer require sagor110090/livewire-modal
Enter fullscreen mode Exit fullscreen mode

And be sure to check out the GitHub repository for more details and support.


Thanks for reading! I hope this package helps you build more flexible and dynamic Laravel applications. If you have any questions or feedback, feel free to reach out in the comments.

Happy coding! 🎉

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (1)

Collapse
 
dimitrim profile image
Dimitri Mostrey

Will certainly try. It has to happen I was looking yesterday for exactly this kind of solution. Packages and how-to's enough of how to make a livewire modal. But not dynamic ones. Indeed, much of the fullstackers still seem to be stuck in the bootstrap era. With all due respect. I switched over less than a year ago myself to tailwind and livewire. Long time Laravel user though, since L4.2.

Anyway, I'll try your package later today, if time admits, and post a follow up.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay