Download the PHP package hadyfayed/filament-react-wrapper without Composer

React Wrapper for Laravel/Filament

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

• 🔧 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

Quick Start

💡 Pro Tip: Use with vite-plugin-filament-react for enhanced developer experience with auto-discovery, dev tools, and performance optimization.

Laravel Setup

1. Add to your JavaScript entry:

2. Update Vite config (with plugin):

3. Optional: Register the Filament plugin:

4. Add to your app.js:

5. Build your assets:

🎯 Quick Start

1. Register a React Component

2. Use in Blade Templates

3. Use in Filament

📚 Component Registration

Basic Registration

Advanced Registration with Lazy Loading

Bulk Registration

Registration from Laravel/PHP

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

Configuration-Based Registration

Add to config/react-wrapper.php:

Artisan Command for Registration

Generate component registration via Artisan:

Facade Usage

Use the ReactWrapper facade for quick registration:

Package Integration

For Laravel package authors:

Dynamic Registration in Filament

Register components dynamically in Filament resources:

🎯 State Management

Using State Manager Provider

Using State Path Hook

Global State Manager

💾 State Persistence

Using Persisted State Hook

Manual Persistence Service

🎨 Filament Integration

Creating Filament Components

Using in Filament Pages

Form Field Integration

🔧 Advanced Features

Middleware System

Error Handling

All components are automatically wrapped with error boundaries that provide:

• Graceful error display
• Error reporting to console
• Retry functionality
• Custom error handlers

🚀 Performance & Memory Safety

Memory Leak Prevention

The system includes comprehensive protection against memory leaks:

Infinite Loop Protection

Built-in protection against infinite loops in state updates:

Performance Optimizations

• Memoization - Automatic memoization of components and state
• Debouncing - Built-in debouncing for state changes and notifications
• Lazy Loading - Code splitting for large components
• Efficient Re-rendering - Smart prop comparison and update batching

🔒 Security Features

Input Validation

XSS Prevention

🛠️ API Reference

Component Registry

State Manager

Hooks

PHP/Laravel API

ReactComponentRegistry Service

ReactWrapper Facade

ReactField Form Component

ReactWidget

Configuration Options

Artisan Commands

Event Hooks

🐛 Debugging & Troubleshooting

Enable Debug Mode

Common Issues

Component Not Found

State Not Syncing

Memory Leaks

📊 Testing

Unit Testing Components

Integration Testing

🚀 Deployment

Production Build

Environment Configuration

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

Code Style

We use ESLint and Prettier for code formatting:

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with ❤️ for the Laravel and React communities
• Inspired by modern component architecture patterns
• Special thanks to all contributors and maintainers

📞 Support

• 📚 Documentation
• 💬 Discussions
• 🐛 Issue Tracker
• 📧 Email Support