Livewire Mesh

LivewireMesh is a powerful package that enables seamless integration of React components within Laravel Livewire applications. Inspired by MingleJS, LivewireMesh takes the concept further by building directly into Livewire's core functionality rather than relying on AlpineJS as an intermediary.

Key Features

• Native Livewire Integration: Built directly on top of Livewire's hooks system for better performance and reliability
• Reactive Props: React components automatically update when Livewire properties change
• Two-way Data Binding: Use the useEntangle hook to create bidirectional bindings between React state and Livewire properties
• Live/Deferred Updates: Choose between live or deferred updates when using entangled properties
• Direct Wire Access: Access Livewire methods and properties directly through the useWire hook

Installation

You can install the package via composer:

composer require ethanbarlo/livewiremesh

📖 For a complete setup guide, see INSTALL.md — covers Vite configuration, TypeScript setup, manual Livewire bundling, and creating your first Mesh component.

Documentation

A full documentation and demo site is in the works.

Example Usage: React-Controlled Inputs

LivewireMesh allows you to create React components that can be used as Livewire form inputs using wire:model. Here's how to create a custom React Select component that integrates seamlessly with Livewire:

1. Generic Livewire Controlled Page Controller

use Livewire\Component;

class UserProfile extends Component
{
    public ?string $country = null;

    public function save()
    {
        $this->validate([
            'country' => 'required|string'
        ]);
    }

    public function countries(): array
    {
        return [
            ['value' => 'us', 'label' => 'United States'],
            ['value' => 'uk', 'label' => 'United Kingdom'],
            ['value' => 'ca', 'label' => 'Canada'],
        ];
    }

    public function render()
    {
        return view('livewire.user-profile');
    }
}

View

<div>
    <form wire:submit.prevent="save">
        <div>
            <label>Select your country:</label>
            <livewire:react-select wire:model="country" :options="$this->countries()" />
            @error('country')
                <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
            @enderror
        </div>
        <button type="submit">Save</button>
    </form>
</div>

• One thing to note, is that you can use either 'wire:model' or 'wire:model.live'. Without needing to make any changes to the LivewireMesh component.

2. The LivewireMesh / React component

Controller

use EthanBarlo\LivewireMesh\MeshComponent;
use Livewire\Attributes\Modelable;

class ReactSelect extends MeshComponent
{
    #[Modelable]
    public string $value = '';

    public function __construct(
        public array $options
    ) {}

    public function component(): string
    {
        return 'resources/js/components/ReactSelect/index.ts';
    }

    public function props(): array
    {
        return [
            'options' => $this->options,
        ];
    }
}

View

import { useEntangle } from '@livewiremesh/react/contexts/LivewireContext';
import Select, { type SelectOption } from 'custom-select-component'; // Example

interface IReactSelect{
    options: SelectOption[];
}
const ReactSelect: React.FC<IReactSelect> = ({ options }) => {
    const [value, setValue] = useEntangle<string>('value');

    return (
        <Select value={value} onChange={setValue} options={options} />
    );
}

This example demonstrates how LivewireMesh enables you to:

• Use React components as form inputs with wire:model
• Handle two-way data binding between React and Livewire
• Create reusable React components that work seamlessly within Livewire forms
• Maintain a reactive connection between your React state and Livewire properties

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Testing

composer test

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Ethan Barlow
• All Contributors

License

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