PHPackages moonlydays/inertia-routed-modals - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. moonlydays/inertia-routed-modals ActiveLibrary[Utility & Helpers](/categories/utility) moonlydays/inertia-routed-modals ================================ Use your routes to open modal windows the same way you open pages with Inertia 2.0.1(8mo ago)3165MITTypeScriptPHP ^8.2CI passing Since Dec 15Pushed 8mo ago1 watchersCompare [ Source](https://github.com/MoonlyDays/inertia-routed-modals)[ Packagist](https://packagist.org/packages/moonlydays/inertia-routed-modals)[ Docs](https://github.com/moonlydays/inertia-routed-modals)[ GitHub Sponsors]()[ RSS](/packages/moonlydays-inertia-routed-modals/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (9)Versions (16)Used By (0) Routed modals for Inertia ========================= [](#routed-modals-for-inertia) [![Latest Version on Packagist](https://camo.githubusercontent.com/45bf50f8c9521a41607460a25e1eb9185eec1ac53789c1a591475ffc1d164b5f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d6f6f6e6c79646179732f696e65727469612d726f757465642d6d6f64616c732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/moonlydays/inertia-routed-modals)[![GitHub Tests Action Status](https://camo.githubusercontent.com/a5f91be45fa66793ece7a802d21405c8b1365a4bd5806208509aff0f5edec2e1/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6d6f6f6e6c79646179732f696e65727469612d726f757465642d6d6f64616c732f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/moonlydays/inertia-routed-modals/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/fcebbbeb88a6167841afea597b53a56f3f1cd1c1449b377a76d5c7f75b1724a1/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6d6f6f6e6c79646179732f696e65727469612d726f757465642d6d6f64616c732f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/moonlydays/inertia-routed-modals/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/e0a848e7fb7fedfa706d580ec09a5ab2e99b38c2ed450b91f121575bb8605ce7/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d6f6f6e6c79646179732f696e65727469612d726f757465642d6d6f64616c732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/moonlydays/inertia-routed-modals) Note This package supports React only. Installation ------------ [](#installation) You can install the package via composer: ``` composer require moonlydays/inertia-routed-modals ``` Install the npm package using: ``` npm install vendor/moonlydays/inertia-routed-modals/node/react ``` Inside the `HandleInertiaRequest` middleware in your app, add the following: ``` use MoonlyDays\InertiaRoutedModals\SharesRoutedModals; class HandleInertiaRequests extends Middleware { use SharesRoutedModals; // add this public function share(Request $request): array { return [ ...parent::share($request), ...$this->shareModal(), // add this // ... ]; } } ``` Usage ----- [](#usage) ### Backend [](#backend) It all starts with a route. Inside your controller create an action that will return the modal using the new `Inertia::modal` method. The first argument is the modal component name (relative to Modals folder). The second optional argument is an array of props that have to be passed to the modal. ``` public function action() { return Inertia::modal("Component", [ "prop" => "value", "other" => "value" ]); } ``` ### Frontend [](#frontend) Inside your `app.tsx` wrap the App component with RoutedModalsProvider component. Use may the same function `resolvePageComponent` that use used to resolve Inertia pages to resolve modal components. ``` import {RoutedModalsProvider} from "./RoutedModalsProvider"; createInertiaApp({ // ... setup({el, App, props}) { const root = createRoot(el); root.render( resolvePageComponent( `./Modals/${name}.tsx`, import.meta.glob('./Modals/**/*.tsx'), ) } > , ); } }) ``` Next you have to specify where the Modal components will be mounted in your layout. Use `` somewhere in the root of your page layout to set that. ``` import {ModalPortal} from "./ModalPortal"; export function MainLayout({children}) { return ( {children} ); } ``` Create a new `resources/js/Modals` folder and create a new modal component the same way you create Inertia pages. The modal components are headless, meaning they are mounted to the DOM without any overhead elements. This is an example MyModal component: ``` // resources/js/Modals/MyModal.tsx export default function MyModal() { return ( This is a cool looking Modal! ); } ``` Now to open that modal, create a `` somewhere in your app that leads to your route that returns a modal. When that Link will be clicked your modal will be opened. Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Daniel Basiuc-Brinzei](https://github.com/MoonlyDays) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 38 — LowBetter than 85% of packages Maintenance60 Regular maintenance activity Popularity14 Limited adoption so far Community7 Small or concentrated contributor base Maturity59 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~18 days Recently: every ~56 days Total 15 Last Release 254d ago Major Versions 1.1.6 → 2.0.02025-08-31 ### Community Maintainers ![](https://www.gravatar.com/avatar/87d541941e03738e9760a7ea35c5ce19347b67e29eb81a216e872b4158b6dc61?d=identicon)[MoonlyDays](/maintainers/MoonlyDays) --- Top Contributors [![MoonlyDays](https://avatars.githubusercontent.com/u/32462579?v=4)](https://github.com/MoonlyDays "MoonlyDays (28 commits)") --- Tags laravelinertiainertia-routed-modalsMoonly Days ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/moonlydays-inertia-routed-modals/health.svg) ``` [![Health](https://phpackages.com/badges/moonlydays-inertia-routed-modals/health.svg)](https://phpackages.com/packages/moonlydays-inertia-routed-modals) ``` ### Alternatives [spatie/laravel-data Create unified resources and data transfer objects 1.7k28.9M627](/packages/spatie-laravel-data)[hirethunk/verbs An event sourcing package that feels nice. 513162.9k6](/packages/hirethunk-verbs)[worksome/exchange Check Exchange Rates for any currency in Laravel. 123544.7k](/packages/worksome-exchange)[ralphjsmit/livewire-urls Get the previous and current url in Livewire. 82270.3k4](/packages/ralphjsmit-livewire-urls)[hydrat/filament-table-layout-toggle Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 6292.3k1](/packages/hydrat-filament-table-layout-toggle)[ralphjsmit/laravel-helpers A package containing handy helpers for your Laravel-application. 13704.6k2](/packages/ralphjsmit-laravel-helpers) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)