Download the PHP package truefanspace/laravel-react-reactions without Composer
On this page you can find all versions of the php package truefanspace/laravel-react-reactions. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download truefanspace/laravel-react-reactions
More information about truefanspace/laravel-react-reactions
Files in truefanspace/laravel-react-reactions
Package laravel-react-reactions
Short Description Faceboook like reaction system for Laravel, Inertia and React
License MIT
Homepage https://github.com/truefanspace/laravel-react-reactions
Informations about the package laravel-react-reactions
Laravel React Reactions
A complete Facebook-like reaction and commenting system for Laravel with Inertia.js and React. Add reactions, comments with nested replies, and toast notifications to any Eloquent model.
Features
- ๐ฏ Reactions System: Facebook-style reactions (like, love, haha, wow, sad, angry) on any model
- ๐ฌ Comments System: Full-featured commenting with unlimited nested replies
- ๐ Reactions on Comments: Users can react to comments just like posts
- โก Inertia.js v2: Seamless SPA experience with server-side routing
- ๐จ Beautiful UI: Animated reaction picker, modal viewers, and smooth interactions
- ๐ Toast Notifications: Built-in toast system for user feedback
- ๐ Flexible Permissions: Customizable permission system for comments
- ๐ Query Optimized: Database subqueries eliminate N+1 problems (1 query for any dataset size)
- ๐ Full TypeScript: All React components are written in TypeScript with proper type definitions
- โ๏ธ Configurable: Reaction types and emojis are fully configurable via config file
- โฟ Accessible: Full keyboard navigation and screen reader support
- ๐งช Fully Tested: Comprehensive unit, feature, and E2E tests (151 passing tests)
Requirements
- PHP ^8.4
- Laravel ^11.0 || ^12.0
- Inertia.js v2
- React 19
- TypeScript ^5.0 (recommended for type safety)
Installation
Publishing Assets
You can publish all package assets at once or individually:
Publish everything (recommended for first-time setup):
Or publish individually:
Available tags:
react-reactions-migrations- Database migrations for reactions and comments tablesreact-reactions-components- React/TypeScript components toresources/js/Components/Reactionsreact-reactions-config- Configuration file toconfig/react-reactions.php
Quick Start
1. Add Traits to Your Model
2. Setup Controller with Query Optimization
3. Setup Inertia Middleware
4. Use React Components
Query Optimization Guide
The N+1 Problem
โ BAD: This creates N+1 queries
โ GOOD: This uses 1 query
How It Works
The withReactionsData() scope adds SQL subqueries to aggregate reactions at the database level:
This executes as one query regardless of how many posts you load.
Performance Comparison
| Dataset | Without Optimization | With withReactionsData() |
|---|---|---|
| 10 posts | 21 queries | 1 query |
| 100 posts | 201 queries | 1 query |
| 1000 posts | 2001 queries | 1 query |
Comments Optimization
โ BAD: Loading comments per post in a loop
โ GOOD: Load all comments at once
Key Optimization Rules
- Always use
withReactionsData()when loading multiple models - Eager load relationships with
with()to avoid N+1 - Use
withCount()instead ofcount()in loops - Batch load related data before mapping
- Avoid calling methods on models in loops that trigger queries
- Monitor queries with Laravel Debugbar in development
Configuration
Customizing Reaction Types
All reaction types are configurable in config/react-reactions.php. The frontend automatically reads from this config:
Important: The reaction types are shared with the frontend via Inertia middleware. Make sure to add this to your HandleInertiaRequests:
This ensures the frontend always uses the same reaction types as the backend, maintaining consistency across your application.
API Reference
HasReactions Trait
HasComments Trait
Comment Model
TypeScript Support
All React components are written in TypeScript with full type safety. The package includes:
- โ TypeScript definitions for all components
- โ Proper type inference for props
- โ Type-safe event handlers
- โ Configurable reaction types with type safety
Component Type Definitions
Using with TypeScript
Testing
Troubleshooting
N+1 Query Issues
- Always use
withReactionsData()when loading multiple models - Use
with()to eager load relationships - Use
withCount()instead ofcount()in loops - Monitor queries with Laravel Debugbar
Reactions Not Working
- Check routes:
php artisan route:list | grep reactions - Verify user is authenticated
- Check browser console for errors
Comments Not Showing
- Verify
initialCommentsprop is passed - Check user authentication
- Ensure
canManageComment()is implemented
License
MIT License. See License File for details.
Credits
- Vahan Drnoyan
- Built with Laravel 11, Inertia.js v2, React 19, TypeScript, and shadcn/ui
All versions of laravel-react-reactions with dependencies
spatie/laravel-package-tools Version ^1.16
illuminate/contracts Version ^11.0||^12.0