{"id":14985357,"url":"https://github.com/sagor110090/livewire-modal","last_synced_at":"2025-09-15T06:37:31.655Z","repository":{"id":253643128,"uuid":"844118567","full_name":"sagor110090/livewire-modal","owner":"sagor110090","description":"A flexible and design-agnostic Laravel Livewire modal package that works seamlessly with Bootstrap, Tailwind CSS, or custom styles. Easily integrate dynamic modals in your Laravel projects without being tied to any specific CSS framework.","archived":false,"fork":false,"pushed_at":"2024-09-29T13:47:22.000Z","size":61,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-18T06:57:45.147Z","etag":null,"topics":["bootstrap","composer","laravel","livewire","modal","tailwindcss","web-development"],"latest_commit_sha":null,"homepage":"https://freecoderteam.com/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sagor110090.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-18T12:49:02.000Z","updated_at":"2024-09-29T13:46:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"de701fc2-2950-4474-b0f9-a7801341a6e3","html_url":"https://github.com/sagor110090/livewire-modal","commit_stats":{"total_commits":31,"total_committers":1,"mean_commits":31.0,"dds":0.0,"last_synced_commit":"d46be3eef4dd813e45d4281570b174f29ada295b"},"previous_names":["sagor110090/livewire-modal"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/sagor110090/livewire-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagor110090%2Flivewire-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagor110090%2Flivewire-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagor110090%2Flivewire-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagor110090%2Flivewire-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sagor110090","download_url":"https://codeload.github.com/sagor110090/livewire-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagor110090%2Flivewire-modal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275218646,"owners_count":25425881,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-15T02:00:09.272Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","composer","laravel","livewire","modal","tailwindcss","web-development"],"created_at":"2024-09-24T14:10:47.961Z","updated_at":"2025-09-15T06:37:31.596Z","avatar_url":"https://github.com/sagor110090.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":" # Laravel Livewire Modal Package\n\n[![Latest Version](https://img.shields.io/github/v/release/sagor110090/livewire-modal.svg?style=flat-square)](https://packagist.org/packages/sagor110090/livewire-modal)\n\nA simple and flexible Laravel Livewire modal package that works seamlessly with any design framework like Bootstrap, Tailwind CSS, or even custom styles. This package allows you to quickly integrate modals into your Livewire projects without being tied to specific CSS libraries.\n\n## Features\n\n- **Framework-Agnostic**: Use with Bootstrap, Tailwind CSS, or custom designs.\n- **Dynamic Modals**: Open and close modals using Livewire events.\n- **Customizable**: Easily style your modals with your preferred CSS.\n\n## Installation\n\nYou can install the package via Composer:\n\n```bash\ncomposer require sagor110090/livewire-modal\n```\n\n### Setup\n\nAdd the following to your `app.blade.php` layout to enable modals throughout your application:\n\n```blade\n\u003clivewire:modals/\u003e\n```\n\nInclude the required JavaScript and CSS files in your `resources/js/app.js`:\n\n```js\nimport '../../vendor/sagor110090/livewire-modal/resources/js/loader.js';\nimport '../../vendor/sagor110090/livewire-modal/resources/css/loader.css';\n```\n\n## Usage\n\n### Opening a Modal\n\nTo open a modal, you can dispatch a Livewire event from any button or action:\n\n```html\n\u003cbutton wire:click=\"$dispatch('openModal', { component: 'edit-user', data: { id: {{ $user-\u003eid }} } })\"\u003e\n    Open Modal\n\u003c/button\u003e\n```\n\n- **component**: The name of the Livewire component you want to load.\n- **data**: The data you want to pass to the component (e.g., user ID).\n\n### Closing a Modal\n\nTo close a modal, simply dispatch the close event:\n\n```html\n\u003cbutton type=\"button\" wire:click=\"$dispatch('closeModal')\"\u003e\n    Cancel\n\u003c/button\u003e\n```\n\n### Sample Livewire Component\n\nHere’s an example of a Livewire component you might use with this package:\n\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse App\\Models\\User;\nuse Livewire\\Component;\n\nclass EditUser extends Component\n{\n    public $user;\n\n    public function mount($id)\n    {\n        $this-\u003euser = User::find($id);\n    }\n\n    public function render()\n    {\n        return view('livewire.edit-user');\n    }\n}\n```\n\n### Blade View Example\n\nThe modal content is fully customizable within your Livewire component's view file:\n\n```blade\n\u003c!-- resources/views/livewire/edit-user.blade.php --\u003e\n\u003cdiv\u003e\n    \u003ch2\u003eEdit User: {{ $user-\u003ename }}\u003c/h2\u003e\n    \u003c!-- Your form or content here --\u003e\n\u003c/div\u003e\n```\n\nYou can use any CSS framework or custom styles in this view file. The package does not impose any specific design restrictions.\n\n## Example Styles\n\nYou can design the modal with any framework. Below is an example using Tailwind CSS:\n\n```blade\n\u003cdiv class=\"fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50\"\u003e\n    \u003cdiv class=\"bg-white rounded-lg shadow-lg p-6\"\u003e\n        \u003c!-- Modal Content --\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nAlternatively, use Bootstrap or any other CSS framework.\n\n## Why Use This Package?\n\n- **Flexibility**: Unlike many modal packages, this one doesn't enforce a specific CSS framework, giving you full control over your design.\n- **Ease of Use**: Simple to implement with just a few Livewire events.\n- **Dynamic Data Handling**: Pass data seamlessly to your modals, making them fully dynamic.\n\n## SEO Considerations\n\nThis Laravel Livewire modal package is designed to be lightweight and versatile, providing developers with an easy way to implement customizable modals across different design frameworks. Whether you're using Bootstrap, Tailwind CSS, or custom styles, this package adapts to your needs without locking you into specific CSS libraries. Enhance your Laravel projects with a modular and framework-agnostic approach to modals.\n\n## Support\n\nFor any issues or feature requests, feel free to [open an issue](https://github.com/sagor110090/livewire-modal/issues).\n\n## License\n\nThis package is open-source software licensed under the [MIT license](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagor110090%2Flivewire-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsagor110090%2Flivewire-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagor110090%2Flivewire-modal/lists"}