ozziexsh/laravel-jetstream-react

⚛️ CLI to replace Vue with React in Laravel Jetstream

Note

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.

If you're starting a new React and Laravel project I would recommend using Laravel Breeze instead as it has a first party React version with almost all of the same features.

If you are having issues with the converter please open an issue!

Laravel Jetstream React CLI

Replaces the vue components in a fresh jetstream application with their react equivalents.

Usage

Simply scaffold a new jetstream application using the vue stack, then run this cli tool.

composer create-project laravel/laravel myapp
cd myapp
composer require laravel/jetstream
php artisan jetstream:install inertia
npx laravel-jetstream-react@latest install

It supports teams, SSR, and dark mode

composer create-project laravel/laravel myapp
cd myapp
composer require laravel/jetstream
php artisan jetstream:install inertia --teams --ssr --dark
npx laravel-jetstream-react@latest install --teams --ssr --dark

Components

For 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

Checkout the src/stubs folder to view all of the generated files

Here are a few helpers available to you

useRoute()

Source

Gives you access to a typed version of ziggy-js

import useRoute from '@/hooks/useRoute';

function Component() {
  const route = useRoute();
  
  return <a href={route('login')}>Login</a>;
}

useTypedPage()

Source

Gives you access to a typed version of usePage() from inertia

The 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

import useTypedPage from '@/hooks/useTypedPage';

function Component() {
  const { props } = useTypedPage<{ canViewThisPage: boolean; }>();
  
  // our custom type is hinted here as well 
  // as the inertia global props such as `user`
  const { canViewThisPage, user } = props;
}

<ConfirmsPassword />

Source

Make the user confirm their password via a modal before calling a function

If their password was confirmed recently (time configured via laravel config) it skips the modal and just calls the function

import ConfirmsPassword from '@/Components/ConfirmsPassword';

function Component() {
  function changeEmail() {
    // only gets called if the password has been verified
  }

  return (
    <ConfirmsPassword onConfirm={changeEmail}>
      <PrimaryButton>Update Email</PrimaryButton>
    </ConfirmsPassword>
  );
}

Building Locally

I had issues with using npm link so I have opted for these steps instead.

First install dependencies and run the build script

npm install
npm run build

Then create a fresh laravel install with jetstream

composer create-project laravel/laravel myapp
cd myapp
composer require laravel/jetstream
php artisan jetstream:install inertia

Finally run the locally built version of laravel-jetstream-react

# from inside the "myapp" directory
# find wherever you cloned the laravel-jetstream-react repo
../laravel-jetstream-react/bin/run install