{"id":13805679,"url":"https://github.com/ozziexsh/laravel-jetstream-react","last_synced_at":"2025-04-13T04:59:33.599Z","repository":{"id":39717745,"uuid":"394084261","full_name":"ozziexsh/laravel-jetstream-react","owner":"ozziexsh","description":"⚛️ CLI to replace Vue with React in Laravel Jetstream","archived":false,"fork":false,"pushed_at":"2024-08-31T05:41:09.000Z","size":859,"stargazers_count":331,"open_issues_count":0,"forks_count":43,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-13T04:59:26.703Z","etag":null,"topics":["jetstream","laravel","react","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/ozziexsh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2021-08-08T22:52:30.000Z","updated_at":"2025-04-01T08:01:54.000Z","dependencies_parsed_at":"2024-04-14T05:13:56.874Z","dependency_job_id":"fb8f1d77-2d80-4ba7-a507-10232207bc92","html_url":"https://github.com/ozziexsh/laravel-jetstream-react","commit_stats":{"total_commits":67,"total_committers":8,"mean_commits":8.375,"dds":"0.17910447761194026","last_synced_commit":"87929328471f9f7753e76720f0ae653fa7db8340"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozziexsh%2Flaravel-jetstream-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozziexsh%2Flaravel-jetstream-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozziexsh%2Flaravel-jetstream-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozziexsh%2Flaravel-jetstream-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ozziexsh","download_url":"https://codeload.github.com/ozziexsh/laravel-jetstream-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665757,"owners_count":21142123,"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","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":["jetstream","laravel","react","vue"],"created_at":"2024-08-04T01:01:03.750Z","updated_at":"2025-04-13T04:59:33.575Z","avatar_url":"https://github.com/ozziexsh.png","language":"TypeScript","funding_links":[],"categories":["Resources"],"sub_categories":["Presets"],"readme":"\u003e [!NOTE]\n\u003e **2024 update**: Although there have been no new additions to this repo in a few years, it still works with the latest Laravel Jetstream version. I intend to keep this repo functional as long as the official Jetstream starter kit is being maintained.\n\u003e\n\u003e If you're starting a new React and Laravel project I would recommend using [Laravel Breeze](https://github.com/laravel/breeze) instead as it has a first party React version with almost all of the same features.\n\u003e\n\u003e If you are having issues with the converter please open an issue!\n\n# Laravel Jetstream React CLI\n\n[![Latest Version on NPM](https://img.shields.io/npm/v/laravel-jetstream-react.svg?style=flat-square)](https://www.npmjs.com/package/laravel-jetstream-react)\n[![Total Downloads](https://img.shields.io/npm/dt/laravel-jetstream-react.svg?style=flat-square)](https://www.npmjs.com/package/laravel-jetstream-react)\n[![Tests](https://github.com/ozziexsh/laravel-jetstream-react/actions/workflows/nightly-clone.yml/badge.svg?branch=main)](https://github.com/ozziexsh/laravel-jetstream-react/actions/workflows/nightly-clone.yml)\n[![Tests](https://github.com/ozziexsh/laravel-jetstream-react/actions/workflows/test-conversion.yml/badge.svg?branch=main)](https://github.com/ozziexsh/laravel-jetstream-react/actions/workflows/test-conversion.yml)\n\nReplaces the vue components in a **fresh** jetstream application with their react equivalents.\n\n## Usage\n\nSimply scaffold a new jetstream application using the vue stack, then run this cli tool.\n\n```bash\ncomposer create-project laravel/laravel myapp\ncd myapp\ncomposer require laravel/jetstream\nphp artisan jetstream:install inertia\nnpx laravel-jetstream-react@latest install\n```\n\nIt supports teams, SSR, and dark mode\n\n```bash\ncomposer create-project laravel/laravel myapp\ncd myapp\ncomposer require laravel/jetstream\nphp artisan jetstream:install inertia --teams --ssr --dark\nnpx laravel-jetstream-react@latest install --teams --ssr --dark\n```\n\n## Components\n\nFor the most part these files were converted 1-1 from their vue counterparts in the original jetstream application. There are a few instances where some vue patterns don't tranfser to react so some different usage is required\n\nCheckout the [src/stubs](./src/stubs) folder to view all of the generated files\n\nHere are a few helpers available to you\n\n### useRoute()\n\n[Source](https://github.com/ozziexsh/laravel-jetstream-react/blob/main/src/stubs/resources/js/Hooks/useRoute.ts)\n\nGives you access to a typed version of [`ziggy-js`](https://github.com/tighten/ziggy)\n\n```javascript\nimport useRoute from '@/hooks/useRoute';\n\nfunction Component() {\n  const route = useRoute();\n  \n  return \u003ca href={route('login')}\u003eLogin\u003c/a\u003e;\n}\n```\n\n### useTypedPage()\n\n[Source](https://github.com/ozziexsh/laravel-jetstream-react/blob/main/src/stubs/resources/js/Hooks/useTypedPage.ts)\n\nGives you access to a typed version of [`usePage()`]() from inertia\n\nThe type is prefilled with the shared props that jetstream passes through and gives you the option to pass your own type if your page has custom props in addition to the others\n\n```typescript\nimport useTypedPage from '@/hooks/useTypedPage';\n\nfunction Component() {\n  const { props } = useTypedPage\u003c{ canViewThisPage: boolean; }\u003e();\n  \n  // our custom type is hinted here as well \n  // as the inertia global props such as `user`\n  const { canViewThisPage, user } = props;\n}\n```\n\n### \\\u003cConfirmsPassword /\u003e\n\n[Source](https://github.com/ozziexsh/laravel-jetstream-react/blob/main/src/stubs/resources/js/Jetstream/ConfirmsPassword.tsx)\n\nMake the user confirm their password via a modal before calling a function\n\nIf their password was confirmed recently (time configured via laravel config) it skips the modal and just calls the function\n\n```javascript\nimport ConfirmsPassword from '@/Components/ConfirmsPassword';\n\nfunction Component() {\n  function changeEmail() {\n    // only gets called if the password has been verified\n  }\n\n  return (\n    \u003cConfirmsPassword onConfirm={changeEmail}\u003e\n      \u003cPrimaryButton\u003eUpdate Email\u003c/PrimaryButton\u003e\n    \u003c/ConfirmsPassword\u003e\n  );\n}\n```\n\n## Building Locally\n\nI had issues with using `npm link` so I have opted for these steps instead.\n\nFirst install dependencies and run the build script\n\n```shell\nnpm install\nnpm run build\n```\n\nThen create a fresh laravel install with jetstream\n\n```shell\ncomposer create-project laravel/laravel myapp\ncd myapp\ncomposer require laravel/jetstream\nphp artisan jetstream:install inertia\n```\n\nFinally run the locally built version of laravel-jetstream-react\n\n```shell\n# from inside the \"myapp\" directory\n# find wherever you cloned the laravel-jetstream-react repo\n../laravel-jetstream-react/bin/run install\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fozziexsh%2Flaravel-jetstream-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fozziexsh%2Flaravel-jetstream-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fozziexsh%2Flaravel-jetstream-react/lists"}