Kinetic is a package that adds a view-composer-like feature to the Inertia.js Laravel adapter. It is used to share props based on the Inertia component name.

Installation

composer require ambengers/kinetic

Usage

This should be very intuitive if you are already familiar with how view and composers work in Laravel.

You can use Inertia::composer() in any service provider to register composers for specific components. The first argument accepts either a string or an array of Inertia components, and the second argument accepts either a class string or a closure.

use Inertia;
use Inertia\ResponseFactory;
use App\Composers\UserComposer;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        // Class-based composer..
        Inertia::composer('User/Profile', UserComposer::class);

        // Closure-based composer..
        Inertia::composer('User/Profile', function (ResponseFactory $inertia) {
            //
        });
    }
}

Class-based composers

You can generate your composer class using this command:

php artisan kinetic:composer UserComposer

Then you can call the $inertia->with() method within the compose method to set the composed props, like so:

class UserComposer
{
    public function compose(ResponseFactory $inertia)
    {
        $inertia->with('list',  ['foo' => 'bar', 'baz' => 'buzz']);
    }
}

Closure-based composers

If you opt for a closure-based composer, your closure must accept an instance of Inertia\ResponseFactory class as the first argument. Then you can call the with() method from the factory class to set the composed props like so:

Inertia::composer('User/Profile', function (ResponseFactory $inertia) {
    $inertia->with([
        'post' => [
            'subject' => 'Hello World!', 'description' => 'This is a description.'
         ]
    ]);
});

Multiple composers

You can also set multiple composers to components using an array, like so:

Inertia::composer(['User/Profile', 'User/Index'], [
    UserComposer::class,
    function (ResponseFactory $inertia) {
        $inertia->with(...);
    }
]);

The array will be automatically merged with any existing composers for the components.

When you call the Inertia::render(‘User/Profile’) the props should now include the composed data.

For more details, you can visit Github