PHPackages power-components/partials - 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. power-components/partials ActiveLibrary[Utility & Helpers](/categories/utility) power-components/partials ========================= v0.1.0(1mo ago)1374↓88.9%MITPHPPHP ^8.2CI passing Since May 29Pushed 3w agoCompare [ Source](https://github.com/Power-Components/partials)[ Packagist](https://packagist.org/packages/power-components/partials)[ Docs](https://github.com/power-components/partials)[ RSS](/packages/power-components-partials/feed)WikiDiscussions 1.x Synced 1w ago READMEChangelog (1)Dependencies (14)Versions (3)Used By (0) Livewire Partials ================= [](#livewire-partials) Livewire Partials provide a structured and explicit way to update **specific DOM fragments** of a Livewire component instead of re-rendering the entire component tree. This is especially useful for complex components such as data tables, where partial updates significantly improve performance and user experience. 🔥 Performance Impact -------------------- [](#-performance-impact) **Rendering a table with 100 rows - Payload Size Comparison:** ``` WITHOUT Partials ████████████████████████████████████████ 18,500 bytes WITH Partials ████████ 4,200 bytes ↓ 77% reduction (14,300 bytes saved per request) ``` ### Real-World Benefits [](#real-world-benefits) MetricStandard LivewireWith PartialsImprovement**Payload Size**~18.5 KB~4.2 KB**77% smaller****Network Transfer**Full component HTMLOnly updated fragment**60-80% less data****Response Time**~45-65 ms~25-35 ms**40% faster****DOM Updates**Entire component morphedTargeted elements only**Minimal reflow****User Experience**Input focus lost, scroll jumpsFocus preserved, smooth updates**Better UX**> 💡 **For a table with 1,000 rows**, the savings are even more dramatic: ~180 KB → ~8 KB (95% reduction) --- Requirements ------------ [](#requirements) - PHP 8.3+ - Livewire ^4.0 --- Installation ------------ [](#installation) ``` composer require power-components/partials ``` --- JavaScript Setup ---------------- [](#javascript-setup) Import the package JavaScript once in your application entrypoint. **resources/js/app.js** ``` import '../../../vendor/power-components/partials/resources/js/index.js' ``` --- Configuration ------------- [](#configuration) You may disable partial rendering globally via environment configuration. **.env** ``` POWERGRID_PARTIALS_ENABLED=false ``` When disabled, Livewire behaves exactly as usual and no partial payloads are generated. --- Core Concepts ------------- [](#core-concepts) ### What Is a Partial [](#what-is-a-partial) A **partial** is a named DOM fragment explicitly marked for selective updates. Only the HTML associated with that fragment is re-rendered and sent to the frontend. Partials are identified by a unique name and mapped to a view or raw HTML. --- View Structure -------------- [](#view-structure) Partials work best when you extract your DOM regions into separate Blade files or components. This allows you to reuse the same view for both the initial render and subsequent partial updates. **resources/views/components/table/index.blade.php** ``` ``` ### Understanding `$this` vs `$__partial` [](#understanding-this-vs-__partial) When a component is rendered normally (initial page load or full Livewire update), the `$this` variable refers to the Livewire component instance. However, during a **partial update**, the partial is rendered in isolation, and the package automatically injects the component instance into a variable named `$__partial`. To make your sub-views (partials) compatible with both scenarios, you should: 1. Accept a `__partial` attribute in your Blade components (using `@props`). 2. Pass `:__partial="$this"` when including them in the main view. 3. Use `$__partial` inside the sub-view to access the component. **resources/views/components/table/tbody.blade.php** ``` @props(['__partial']) @foreach($__partial->users as $user) {{ $user->id }} {{ $user->name }} @endforeach ``` --- Component Usage --------------- [](#component-usage) ### Registering Partials Manually [](#registering-partials-manually) Use the `partials()` helper to register one or more partials during a component action. ``` public function sortBy(string $field): void { $this->sortField = $field; partials($this) ->partial( 'table-thead', 'components.table.thead', [ 'tableName' => $this->tableName, ] ) ->partial( 'table-tbody', 'components.table.tbody', [ 'tableName' => $this->tableName, ] ); } ``` The component instance is automatically available inside partial views as `$__partial`. --- Attribute-Based Partial Rendering --------------------------------- [](#attribute-based-partial-rendering) For simple scenarios, partials can be registered declaratively using the `PartialRender` attribute. ``` use PowerComponents\Partials\Attribute\PartialRender; #[PartialRender('components.table.tbody', 'table-tbody')] public function sortBy(string $field): void { $this->sortField = $field; } ``` When the method is executed, the specified view is automatically rendered and dispatched as a partial update. --- Ignoring Elements (Preserving State) ------------------------------------ [](#ignoring-elements-preserving-state) You may exclude specific elements from being re-rendered during partial updates using `wire:partial.ignore`. This is particularly useful for elements that maintain their own internal state (like Alpine.js components, checkboxes, or focus) that would otherwise be lost if the element's HTML were replaced. ### Key Usage [](#key-usage) This directive **must** be used on an element that is inside a `wire:partial` block. For it to work correctly, the element **must** have a unique identification (key). The package attempts to automatically identify it via `wire:key` or `id` attributes. If neither is present, you **must** provide a custom key directly in the directive. ``` Name @foreach($users as $user) first) wire:partial.ignore="first-user-bio" @endif > {{ $user->bio }} @endforeach ``` Using explicit keys (e.g., `wire:partial.ignore="my-key"`) is the best practice as it makes the relationship between the ignored element and its state more predictable and robust. ### How it works [](#how-it-works) 1. **Backend:** The package detects the `wire:partial.ignore` directive and replaces the element's content with a lightweight placeholder (``). 2. **Frontend:** Before applying the update, the JavaScript bridge captures the current `innerHTML` of the ignored element. 3. **Morphing:** During the DOM morphing process, the ignored element itself is skipped (it's not updated), and its original content is restored if necessary. 4. **Preservation:** Event listeners, local state, and Alpine.js data remain completely intact because the DOM element is never destroyed or replaced. Credits ------- [](#credits) - Created by [Luan Freitas](https://twitter.com/luanfreitasdev) [Dan Harrin](https://github.com/danharrin) proposed the original concept of the partials. The code for this package is based on the code he kindly shared with us. **Notice of Non-Affiliation and Disclaimer:** Partials are not affiliated with, associated with, endorsed by, or in any way officially connected with the [Laravel Livewire](https://laravel-livewire.com) - copyright by Caleb Porzio. Laravel is a trademark of Taylor Otwell. ### Health Score 41 — FairBetter than 87% of packages Maintenance92 Actively maintained with recent releases Popularity19 Limited adoption so far Community6 Small or concentrated contributor base Maturity37 Early-stage or recently created project Bus Factor1 Top contributor holds 100% 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 ~0 days Total 2 Last Release 51d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/888b082ddb04fa96b770095799734cba0facb5967c4319019b2c9ccda0e3a84c?d=identicon)[luanfreitasdev](/maintainers/luanfreitasdev) --- Top Contributors [![luanfreitasdev](https://avatars.githubusercontent.com/u/33601626?v=4)](https://github.com/luanfreitasdev "luanfreitasdev (12 commits)") ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/power-components-partials/health.svg) ``` [![Health](https://phpackages.com/badges/power-components-partials/health.svg)](https://phpackages.com/packages/power-components-partials) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9577.8M138](/packages/livewire-flux)[jantinnerezo/livewire-alert This package provides a simple alert utilities for your livewire components. 8131.4M20](/packages/jantinnerezo-livewire-alert)[leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4911.6M11](/packages/leandrocfe-filament-apex-charts)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 728176.2k14](/packages/tallstackui-tallstackui)[venturedrake/laravel-crm A free open source CRM built as a package for laravel projects 44611.3k](/packages/venturedrake-laravel-crm)[noerd/noerd 101.4k10](/packages/noerd-noerd) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)