{"_id":"@alikmanukian/momentum-modal-react","_rev":"1-04a88e34d43ed9b261b3064c50e18208","name":"@alikmanukian/momentum-modal-react","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0":{"name":"@alikmanukian/momentum-modal-react","version":"1.0.0","keywords":["laravel","inertia","react","modal","dialog"],"author":{"name":"Aleksandr Manukyan"},"license":"ISC","_id":"@alikmanukian/momentum-modal-react@1.0.0","maintainers":[{"name":"alikmanukian","email":"alikmanukian@gmail.com"}],"homepage":"https://github.com/aleksandrrf/momentum-modal-react","bugs":{"url":"https://github.com/aleksandrrf/momentum-modal-react/issues"},"dist":{"shasum":"e3a9d9e7f373a0a3d6f8f1f327757fece6176db2","tarball":"https://registry.npmjs.org/@alikmanukian/momentum-modal-react/-/momentum-modal-react-1.0.0.tgz","fileCount":8,"integrity":"sha512-CcDPc3fuZEw7Ur/lp2ybaFwnStuM4azHMYKdV3wDw6CT8rQiQ3p53I8wAdxvE8+tkYe6U4lgfsqS+TEY9t92Bw==","signatures":[{"sig":"MEUCIEGB+aRo6pD16Dgb8LBUn10dlODHYbpksW0if7g+v0Z9AiEAjF5BjrH5Nke3IknUROz2shsWewqFvTgJ49XPpl8pQHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44975},"main":"./dist/momentum-modal-react.umd.cjs","type":"module","types":"./dist/types/index.d.ts","module":"./dist/momentum-modal-react.js","exports":{".":{"import":"./dist/momentum-modal-react.js","require":"./dist/momentum-modal-react.umd.cjs"}},"gitHead":"f7d42a862db63e1afd82a3165bea40bf8e041238","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"alikmanukian","email":"alikmanukian@gmail.com"},"repository":{"url":"git+https://github.com/aleksandrrf/momentum-modal-react.git","type":"git"},"_npmVersion":"10.2.4","description":"A react package that lets you implement backend-driven modal dialogs for Inertia apps.","directories":{},"_nodeVersion":"20.11.0","dependencies":{"axios":"^1.2.0","react":"^18.2.0","react-dom":"^18.2.0","@inertiajs/react":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.1.0","axios":"^1.2.0","eslint":"^8.56.0","typescript":"^5.2.2","@types/node":"^20.11.19","@types/react":"^18.2.55","vite-plugin-dts":"^3.7.2","@types/react-dom":"^18.2.19","@vitejs/plugin-react-swc":"^3.5.0","@typescript-eslint/parser":"^6.21.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.5","@typescript-eslint/eslint-plugin":"^6.21.0"},"_npmOperationalInternal":{"tmp":"tmp/momentum-modal-react_1.0.0_1713525622312_0.9087432574354115","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"@alikmanukian/momentum-modal-react","version":"1.2.0","type":"module","scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview"},"dependencies":{"@inertiajs/react":"^2.0.4","axios":"^1.2.0","react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@types/node":"^20.11.19","@types/react":"^18.2.55","@types/react-dom":"^18.2.19","@typescript-eslint/eslint-plugin":"^6.21.0","@typescript-eslint/parser":"^6.21.0","@vitejs/plugin-react-swc":"^3.5.0","axios":"^1.2.0","eslint":"^8.56.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.5","typescript":"^5.2.2","vite":"^6.2.0","vite-plugin-dts":"^4.5.3"},"description":"A react package that lets you implement backend-driven modal dialogs for Inertia apps.","keywords":["laravel","inertia","react","modal","dialog"],"author":{"name":"Aleksandr Manukyan"},"repository":{"type":"git","url":"git+https://github.com/aleksandrrf/momentum-modal-react.git"},"homepage":"https://github.com/aleksandrrf/momentum-modal-react","main":"./dist/momentum-modal-react.umd.cjs","module":"./dist/momentum-modal-react.js","types":"./dist/types/index.d.ts","exports":{".":{"import":"./dist/momentum-modal-react.js","require":"./dist/momentum-modal-react.umd.cjs"}},"bugs":{"url":"https://github.com/aleksandrrf/momentum-modal-react/issues"},"license":"ISC","_id":"@alikmanukian/momentum-modal-react@1.2.0","gitHead":"72117e63c0c79292a2afb4aa71dbf7d309465a19","_nodeVersion":"20.18.1","_npmVersion":"11.1.0","dist":{"integrity":"sha512-qhknxaOuYVLNRxN5KhZ1v5lbK2qw0yiDbQYM/Jcife0ufyz001DFnGR4+RVYEwwB+s2r44YjiX/G9Sa6IkR8VQ==","shasum":"fb7575c73be62c623e9b833867b693bcee36f513","tarball":"https://registry.npmjs.org/@alikmanukian/momentum-modal-react/-/momentum-modal-react-1.2.0.tgz","fileCount":8,"unpackedSize":43742,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDUss3PZlByJtQNXlBopYNJeW1jTuwzsTWya6FJTXbzagIhAMzpYfTzhfGhtSBkf+0NAhT8U8IGSU5P8CagNSR73RDF"}]},"_npmUser":{"name":"alikmanukian","email":"alikmanukian@gmail.com"},"directories":{},"maintainers":[{"name":"alikmanukian","email":"alikmanukian@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/momentum-modal-react_1.2.0_1741075559004_0.8300099486763775"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-19T11:20:22.232Z","modified":"2025-03-04T08:05:59.352Z","1.0.0":"2024-04-19T11:20:22.466Z","1.2.0":"2025-03-04T08:05:59.169Z"},"bugs":{"url":"https://github.com/aleksandrrf/momentum-modal-react/issues"},"author":{"name":"Aleksandr Manukyan"},"license":"ISC","homepage":"https://github.com/aleksandrrf/momentum-modal-react","keywords":["laravel","inertia","react","modal","dialog"],"repository":{"type":"git","url":"git+https://github.com/aleksandrrf/momentum-modal-react.git"},"description":"A react package that lets you implement backend-driven modal dialogs for Inertia apps.","maintainers":[{"name":"alikmanukian","email":"alikmanukian@gmail.com"}],"readme":"# Momentum Modal (React)\n\nMomentum Modal is a package that lets you implement backend-driven modal dialogs for Inertia apps with React.\n\n## Installation\n\nFirst you need to install the Laravel package.\nYou can find the full documentation of Momentum Modal [here](https://github.com/lepikhinb/momentum-modal).\n\nThen install the react adapter:\n\n```bash\nnpm i momentum-modal-react\n```\n\n> **Warning**\n> The package utilizes `axios` under the hood. If your app is already using `axios` as a dependency, make sure to lock it to the same version Inertia uses.\n>\n> ```bash\n> npm i axios@1.2.0\n> ```\n\n## Setup\n\n[Modal](https://github.com/josemariagomez/momentum-modal-react) is a **headless** component, meaning you have full control over its look, whether it's a modal dialog or a slide-over panel. You are free to use any 3rd-party solutions to power your modals, such as [Headless UI](https://headlessui.com/) or [Radix](https://www.radix-ui.com/).\n\nPut the `Modal` component somewhere within the layout. Also, you can pass the component resolver to the `Modal` component, or use it globally.\n\n### Global\n\n```jsx\n// app.jsx\n\n// without chunks\n...\nglobalThis.resolveMomentumModal = (name) => {\n    const modals = import.meta.glob(\"./modals/**/*.jsx\", {eager: true});\n    return modals[`./modals/${name}.jsx`];\n};\ncreateInertiaApp(...)\n...\n\n// without chunks\n...\nglobalThis.resolveMomentumModal = (name) => {\n    const modals = import.meta.glob(\"./modals/**/*.jsx\");\n    return modals[`./modals/${name}.jsx`]();\n};\ncreateInertiaApp(...)\n...\n\n// YourLayout.jsx\nimport {Modal} from 'momentum-modal-react';\n\nexport function YourLayout({children}) {\n  return <>\n    {children}\n    <Modal/>\n  </>\n}\n```\n\nThe resolver can be the same you use to render Inertia pages.\n\n## Usage\n\nModals have their own routes, letting you access them even via direct URLs. Define routes for your modal pages.\n\n```php\n// background context / base page\nRoute::get('{user}', ShowUser::class)\n    ->name('users.show');\n\n// modal route\nRoute::get('{user}/{tweet}', ShowTweet::class)\n    ->name('users.tweets.show');\n```\n\nRender a modal from a controller. Specify the `base` route to render the background when the modal is accessed directly.\n\n```php\nclass ShowTweet extends Controller\n{\n    public function __invoke(User $user, Tweet $tweet)\n    {\n        return Inertia::modal('Tweets/Show')\n            ->with([\n                'user' => $user,\n                'tweet' => $tweet,\n            ])\n            ->baseRoute('users.show', $user);\n    }\n}\n```\n\n## Credits\n\n- Creator of the original Laravel and Vue 3 packages [Boris Lepikhin](https://twitter.com/lepikhinb)\n- [Jose María Gómez](https://twitter.com/josegmdev)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","readmeFilename":"README.md"}