PHPackages ethanbarlo/livewiremesh - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. ethanbarlo/livewiremesh ActiveLibrary ethanbarlo/livewiremesh ======================= This is my package livewiremesh v0.6.0(2mo ago)01.6k[4 PRs](https://github.com/EthanBarlo/LivewireMesh/pulls)MITTypeScriptPHP ^8.3CI passing Since Jan 29Pushed 1mo ago1 watchersCompare [ Source](https://github.com/EthanBarlo/LivewireMesh)[ Packagist](https://packagist.org/packages/ethanbarlo/livewiremesh)[ Docs](https://github.com/ethanbarlo/livewiremesh)[ GitHub Sponsors]()[ RSS](/packages/ethanbarlo-livewiremesh/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (9)Dependencies (28)Versions (16)Used By (0) Livewire Mesh ============= [](#livewire-mesh) [![Latest Version on Packagist](https://camo.githubusercontent.com/485e88ffffd29ffd1497f789a6a27a8be594112a60d9ec3aa19da49eafbfc1f5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f657468616e6261726c6f2f6c697665776972656d6573682e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ethanbarlo/livewiremesh)[![GitHub Tests Action Status](https://camo.githubusercontent.com/8e91f514067982d9932f9c2c61e8ea71478dc1ce3d26e2bffebf3cb3099df01a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f657468616e6261726c6f2f6c697665776972656d6573682f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/ethanbarlo/livewiremesh/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/39a6814ab55a1b5ff92ccb355802d4d04e8cb34e8dad6f9b16473f6882f45087/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f657468616e6261726c6f2f6c697665776972656d6573682f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/ethanbarlo/livewiremesh/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/e96eff45d12d39dc6f628489520a729688fe2a6ad63ce8b8e2ff90a70fb8dca5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f657468616e6261726c6f2f6c697665776972656d6573682e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ethanbarlo/livewiremesh) LivewireMesh is a powerful package that enables seamless integration of React components within Laravel Livewire applications. Inspired by [MingleJS](https://github.com/ijpatricio/mingle), LivewireMesh takes the concept further by building directly into Livewire's core functionality rather than relying on AlpineJS as an intermediary. Key Features ------------ [](#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 ------------ [](#installation) You can install the package via composer: ``` composer require ethanbarlo/livewiremesh ``` **📖 For a complete setup guide, see [INSTALL.md](INSTALL.md)** — covers Vite configuration, TypeScript setup, manual Livewire bundling, and creating your first Mesh component. Documentation ------------- [](#documentation) A full documentation and demo site is in the works. Example Usage: React-Controlled Inputs -------------------------------------- [](#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` ``` Select your country: @error('country') {{ $message }} @enderror Save ``` - 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 = ({ options }) => { const [value, setValue] = useEntangle('value'); return ( ); } ``` 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 --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Testing ------- [](#testing) ``` composer test ``` Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Ethan Barlow](https://github.com/EthanBarlo) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 45 — FairBetter than 93% of packages Maintenance88 Actively maintained with recent releases Popularity19 Limited adoption so far Community11 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 59.5% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~49 days Recently: every ~86 days Total 9 Last Release 76d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/65189904?v=4)[Ethan](/maintainers/ethanbarlo)[@EthanBarlo](https://github.com/EthanBarlo) --- Top Contributors [![EthanBarlo](https://avatars.githubusercontent.com/u/65189904?v=4)](https://github.com/EthanBarlo "EthanBarlo (22 commits)")[![EthanB-Reach](https://avatars.githubusercontent.com/u/138114575?v=4)](https://github.com/EthanB-Reach "EthanB-Reach (7 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (4 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (4 commits)") --- Tags laravellivewirereactEthan Barlowlivewiremesh ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/ethanbarlo-livewiremesh/health.svg) ``` [![Health](https://phpackages.com/badges/ethanbarlo-livewiremesh/health.svg)](https://phpackages.com/packages/ethanbarlo-livewiremesh) ``` ### Alternatives [spatie/livewire-filepond Upload files using Filepond in Livewire components 306452.7k3](/packages/spatie-livewire-filepond)[leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4861.2M8](/packages/leandrocfe-filament-apex-charts)[spatie/laravel-livewire-wizard Build wizards using Livewire 4061.0M4](/packages/spatie-laravel-livewire-wizard)[ijpatricio/mingle Use Vue and React in Laravel Livewire Applications. 43445.4k2](/packages/ijpatricio-mingle)[vormkracht10/laravel-mails Laravel Mails can collect everything you might want to track about the mails that has been sent by your Laravel app. 24149.7k](/packages/vormkracht10-laravel-mails)[ralphjsmit/livewire-urls Get the previous and current url in Livewire. 82270.3k4](/packages/ralphjsmit-livewire-urls) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)