fsac/laravel-react-make

Artisan command to generate React components including TypeScript support

v4.0.0-beta.1 2024-02-24 13:34 UTC

Requires

• php: ^8.1|^8.2|^8.3
• illuminate/console: ^10|^11
• illuminate/filesystem: ^10|^11
• illuminate/support: ^10|^11

Requires (Dev)

• larastan/larastan: ^2.9
• laravel/pint: ^1.14
• orchestra/testbench: ^8.0
• phpunit/phpunit: ^10.5

MIT

• Joby Harding

• laravel
• react
• artisan
• typescript

README

Quickly scaffold React components in your Laravel app using Artisan. Includes customisable template stubs and TypeScript support.

php artisan make:react MyComponent

Support

Laravel	Laravel React Make
10	4 (beta)
10, 9	3
9, 8	2
8, 7, 6	1

Installation

In your Laravel directory install via Composer.

composer require --dev fsac/laravel-react-make

Basic Usage

Generate a React function component under resources/js/components.

php artisan make:react PrimaryButton
# -> resources/js/components/PrimaryButton.jsx

You may also include subdirectories:

php artisan make:react buttons/Primary
# -> resources/js/components/buttons/Primary.jsx

Providing an absolute path will omit the components prefix, using resources/js as the root:

php artisan make:react /pages/Settings
# -> resources/js/pages/Settings.jsx

Advanced Usage

TypeScript

The command also supports generating TypeScript components. The short version -t may also be used:

php artisan make:react --typescript PrimaryButton
# -> resources/js/components/PrimaryButton.tsx

File Extension

You may provide a custom file extension. The short version -x may also be used:

php artisan make:react --extension js PrimaryButton
# -> resources/js/components/PrimaryButton.js

Configuration

If you'd like to customise the default configuration you must publish the config file:

php artisan vendor:publish --tag react-config

Base Path

To use a base path other than resources/js you may provide a value to the base configuration option:

'base' => resource_path('ts'),

Path Prefix

When specifying relative paths the command will use the components prefix. You may change this prefix using the prefix configuration option:

'prefix' => 'Components',

Default Options

Providing the same options each time you use the command, for example when working with a TypeScript codebase, can become tiresome. You may provide your own default option values using the defaults config property:

'defaults' => ['typescript' => true],

Customising Stubs

If you'd like to customise the default templates used to generate components you may publish them to the stubs directory:

php artisan vendor:publish --tag react-stub

License

This code is open sourced under the MIT License.