npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

laravel-jetstream-react

v0.5.1

Published

Replace Vue with React in a fresh Laravel Jetstream application

Downloads

264

Readme

Laravel Jetstream React CLI

Latest Version on NPM Total Downloads Tests Tests

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 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