- How do I install and set up livewire-modal in a Laravel project?
- Run `composer require sagor110090/livewire-modal` and register the service provider in `config/app.php`. No frontend build step is required—just use the `@livewire('modal-component')` directive in your Blade templates. The package includes a base `Modal` class for extending custom modals.
- Does this package work with Livewire 3.x, or is it only for Livewire 2.x?
- Check the package’s `composer.json` for Livewire version constraints. As of now, verify compatibility with your Livewire version by reviewing the [GitHub releases](https://github.com/sagor110090/livewire-modal/releases) or opening an issue for clarification. Livewire 3.x support may require updates from the maintainer.
- Can I use Tailwind CSS or Bootstrap with this modal package?
- Yes, the package has no built-in styling and works seamlessly with Tailwind, Bootstrap, or custom CSS. Use utility classes (e.g., `bg-white`, `p-4`) directly in your modal components. The package only handles the modal logic and structure, leaving styling to your framework.
- How do I create a modal with dynamic content (e.g., a form or API response)?
- Extend the base `Modal` class and bind dynamic data using Livewire properties (e.g., `$userData`). Use `@this` or `$wire:model` for two-way binding. For API responses, fetch data in the component’s `mount()` or `hydrate()` methods and update the view accordingly.
- What happens if JavaScript is disabled in the browser?
- The package relies on Livewire’s server-side rendering, so modals will still function as static HTML (though interactions like opening/closing may require page reloads). For graceful degradation, ensure your Blade templates include fallback links or buttons that trigger modal visibility via URL parameters or session storage.
- Can I stack multiple modals or create nested modals with this package?
- The package supports multiple modal instances simultaneously, but nested modals require manual handling of visibility states (e.g., using Livewire’s `$emit` and `$on` events). For complex stacking, consider extending the base class or using CSS z-index management. Test thoroughly to avoid overlap issues.
- How do I test modals in PHPUnit or my CI pipeline?
- Use Livewire’s testing utilities (`Livewire::test()`) to simulate modal interactions. Test visibility toggles, form submissions, and event emissions. For CI, mock Livewire’s `$emit` and `$dispatch` methods if needed. The package itself lacks built-in test coverage, so focus on testing your custom modal components.
- Are there performance concerns with using many modal instances?
- Overusing modal instances can impact Livewire’s component lifecycle, especially if modals are frequently re-rendered. Optimize by lazy-loading modals or using `$persist` for stateful components. Monitor performance with Laravel Debugbar or Xdebug to identify bottlenecks.
- What alternatives exist for Livewire modals, and when should I choose them?
- Alternatives include Alpine.js modals (for client-side reactivity), Bootstrap’s native modal (if you’re already using Bootstrap), or dedicated JS libraries like Headless UI. Choose this package if you prefer server-rendered, dependency-free modals with Livewire’s reactivity. Opt for JS alternatives if you need advanced animations or real-time updates.
- How do I handle form submissions or validation errors in a livewire-modal?
- Use Livewire’s built-in validation rules and `$errors` property to display errors in your modal. For form submissions, bind inputs to Livewire properties (e.g., `$wire:model`) and handle submission via the component’s `submit()` method. Redirect or emit events on success/failure to update the modal state dynamically.