PHPackages                             hadyfayed/filament-react-wrapper - 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. [Utility & Helpers](/categories/utility)
4. /
5. hadyfayed/filament-react-wrapper

ActiveLibrary[Utility & Helpers](/categories/utility)

hadyfayed/filament-react-wrapper
================================

React component integration system for FilamentPHP applications

3.1.1(10mo ago)13921MITTypeScriptPHP ^8.2CI failing

Since Jun 24Pushed 10mo agoCompare

[ Source](https://github.com/hadyfayed/filament-react-wrapper)[ Packagist](https://packagist.org/packages/hadyfayed/filament-react-wrapper)[ Docs](https://github.com/hadyfayed/filament-react-wrapper)[ RSS](/packages/hadyfayed-filament-react-wrapper/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (5)Versions (7)Used By (1)

React Wrapper for Laravel/Filament
==================================

[](#react-wrapper-for-laravelfilament)

[![npm version](https://camo.githubusercontent.com/4f8827d26b86c58bf8af668c9fcf61117a0a7b04c272124052cea5e8a7ce9f43/68747470733a2f2f62616467652e667572792e696f2f6a732f406861647966617965642f66696c616d656e742d72656163742d777261707065722e737667)](https://badge.fury.io/js/@hadyfayed/filament-react-wrapper)[![License: MIT](https://camo.githubusercontent.com/fdf2982b9f5d7489dcf44570e714e3a15fce6253e0cc6b5aa61a075aac2ff71b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667)](https://opensource.org/licenses/MIT)[![TypeScript](https://camo.githubusercontent.com/5df0400b2f5598241dae8e55123f6eb21c93fd6d69647e68fc17d4105bcb61b0/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f547970655363726970742d352e302b2d626c75652e737667)](https://www.typescriptlang.org/)[![Laravel](https://camo.githubusercontent.com/9b7d4cecafa5516eee431c865a91f040a18a2cd9dcf556bdf56695e151697d5a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31302e302b2d7265642e737667)](https://laravel.com)[![Filament](https://camo.githubusercontent.com/f89d64be19fe64df76ffa095c1e84c22288d0914989081595c8cc743572a58e4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f46696c616d656e742d332e302b2d6f72616e67652e737667)](https://filamentphp.com)

A comprehensive React integration system for Laravel and Filament applications, providing seamless component registration, state management, and real-time synchronization with built-in memory leak prevention and infinite loop protection.

🚀 Features
----------

[](#-features)

- **🔧 Universal Component System** - Register and render React components anywhere in your Laravel app
- **🎯 Advanced State Management** - Built-in state management with persistence and Livewire sync
- **⚡ Performance Optimized** - Lazy loading, memoization, efficient re-rendering, and memory leak prevention
- **🛡️ Type Safe** - Full TypeScript support with comprehensive type definitions
- **🔄 Real-time Sync** - Bidirectional data flow with Livewire components
- **📦 Zero Config** - Works out of the box with sensible defaults
- **🎨 Filament Ready** - Native integration with Filament admin panels
- **🧩 Extensible** - Plugin system with middleware support
- **🔒 Security First** - XSS protection, input validation, and secure prop handling
- **🚫 Loop Protection** - Built-in infinite loop detection and prevention
- **🧠 Memory Safe** - Automatic cleanup and bounded data structures

📦 Installation
--------------

[](#-installation)

### Quick Start

[](#quick-start)

```
# Install packages
npm install @hadyfayed/filament-react-wrapper
composer require hadyfayed/filament-react-wrapper

# Enhanced DX (recommended)
npm install --save-dev vite-plugin-filament-react
```

💡 **Pro Tip**: Use with [`vite-plugin-filament-react`](https://github.com/hadyfayed/vite-plugin-filament-react) for enhanced developer experience with auto-discovery, dev tools, and performance optimization.

### Laravel Setup

[](#laravel-setup)

1. **Add to your JavaScript entry:**

```
// resources/js/app.js
import '@hadyfayed/filament-react-wrapper';
```

2. **Update Vite config (with plugin):**

```
// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import filamentReact from 'vite-plugin-filament-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        react(),
        filamentReact(), // Auto-discovery and dev tools
    ],
});
```

3. **Optional: Register the Filament plugin:**

```
// app/Providers/Filament/AdminPanelProvider.php
use HadyFayed\ReactWrapper\FilamentReactWrapperPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentReactWrapperPlugin::make(),
        ]);
}
```

3. **Add to your `app.js`:**

```
import '@hadyfayed/filament-react-wrapper';
```

4. **Build your assets:**

```
npm run build
```

🎯 Quick Start
-------------

[](#-quick-start)

### 1. Register a React Component

[](#1-register-a-react-component)

```
import { componentRegistry } from '@hadyfayed/filament-react-wrapper';
import MyComponent from './components/MyComponent';

// Simple registration
componentRegistry.register({
  name: 'MyComponent',
  component: MyComponent,
  defaultProps: {
    message: 'Hello World!'
  }
});
```

### 2. Use in Blade Templates

[](#2-use-in-blade-templates)

```

```

### 3. Use in Filament

[](#3-use-in-filament)

```
use HadyFayed\ReactWrapper\Components\ReactComponent;

class EditUser extends EditRecord
{
    protected function getHeaderActions(): array
    {
        return [
            ReactComponent::make('UserProfileEditor')
                ->props([
                    'userId' => $this->record->id,
                    'editable' => true
                ])
                ->statePath('userProfile')
        ];
    }
}
```

📚 Component Registration
------------------------

[](#-component-registration)

### Basic Registration

[](#basic-registration)

```
import { componentRegistry } from '@hadyfayed/filament-react-wrapper';

componentRegistry.register({
  name: 'UserCard',
  component: UserCard,
  defaultProps: {
    showAvatar: true,
    size: 'medium'
  },
  metadata: {
    category: 'user',
    description: 'Displays user information in a card format',
    tags: ['user', 'display', 'card']
  }
});
```

### Advanced Registration with Lazy Loading

[](#advanced-registration-with-lazy-loading)

```
componentRegistry.register({
  name: 'HeavyComponent',
  component: () => import('./components/HeavyComponent'),
  isAsync: true,
  config: {
    lazy: true,
    cache: true,
    preload: false
  },
  metadata: {
    category: 'charts',
    description: 'Advanced data visualization component'
  }
});
```

### Bulk Registration

[](#bulk-registration)

```
import { registerComponents } from '@hadyfayed/filament-react-wrapper';

const components = [
  { name: 'Button', component: Button },
  { name: 'Modal', component: Modal },
  { name: 'Form', component: Form }
];

registerComponents(components);
```

### Registration from Laravel/PHP

[](#registration-from-laravelphp)

You can also register React components from the Laravel/PHP side, which is useful for package authors or when you want to manage component registration through Laravel configuration:

#### Service Provider Registration

[](#service-provider-registration)

```