esign/laravel-react-components

Use react components within laravel

1.4.0 2024-03-12 20:54 UTC

Requires

• php: ^8.0
• illuminate/console: ^8.80|^9.0|^10.0|^11.0
• illuminate/filesystem: ^8.80|^9.0|^10.0|^11.0
• illuminate/support: ^8.80|^9.0|^10.0|^11.0

Requires (Dev)

• friendsofphp/php-cs-fixer: ^3.5
• orchestra/testbench: ^6.0|^7.0|^8.0|^9.0
• phpunit/phpunit: ^9.0|^10.0

MIT

• Jordy Van der Haegen

• components
• react
• esign
• react-components

README

This packages allows you to register react components within your laravel application.

Installation

You can install the package via composer:

composer require esign/laravel-react-components

The package will automatically register a service provider.

Usage

To register the container for a react component a @reactComponent directive has been included. Props may be passed as the second parameter:

@reactComponent('article-card')
@reactComponent('article-card', ['article' => $article])

In case you want some more customization you may always use the anonymous component. This component allows you to pass additional attributes and define as what HTML tag the component should be rendered:

<x-react-component
    component="article-card"
    :props="['article' => $article]"
    as="span"
    class="container"
/>

To register the components in your frontend build, you may use the registerReactComponents function included in this package. This can be published using the following command:

php artisan react-components:install

The file will be copied to resources/assets/js/utils/registerReactComponents.js but may be moved to any other location.

import { ArticleCard } from "./Components/ArticleCard";
import { registerReactComponents } from "./utils/registerReactComponents";

registerReactComponents({
    'article-card': ArticleCard,
});

Testing

composer test

License

The MIT License (MIT). Please see License File for more information.