Skip to content

FullStackAppCo/laravel-react-make

 
 

Repository files navigation

Laravel React Make

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.