Download the PHP package capevace/livewire-optimistic-ui without Composer
On this page you can find all versions of the php package capevace/livewire-optimistic-ui. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download capevace/livewire-optimistic-ui
More information about capevace/livewire-optimistic-ui
Files in capevace/livewire-optimistic-ui
Package livewire-optimistic-ui
Short Description A utility package for better Optimistic UI support in Laravel Livewire.
License MIT
Homepage https://github.com/capevace/livewire-optimistic-ui
Informations about the package livewire-optimistic-ui
Livewire Optimistic UI – A utility package for better Optimistic UI support in Laravel Livewire.
Installation
You can install the package via composer:
Example
Usage
Adding optimistic UI to your Livewire component
You need to wrap your UI with the x-optimistic::injector
component. This component will handle the optimistic UI for you.
You can then call your functions optimistically by using the $optimistic
object.
Displaying the added items
You can use the x-optimistic::added
directive to display items that are added optimistically. The component will loop all added items and makes each available in the $item
variable.
Optimistic Directives
You can add the x-optimistic
directive to inject the optimistic state of a given item. The ID will be inferred from the wire:key
attribute or can be passed with x-optimistic="<id>"
.
Optimistic Functions
To add an optimistic function to your Livewire component, you can use the #[Optimistic]
attribute.
The Javascript in the fn
parameter will be executed on the client-side when the function is called. The params
array contains the parameters passed to the function.
Locally generated IDs
When creating new items, a new UUID will be generated for the item. This ID identifies the item in transit. If you use this ID to actually create the item, you can support interactions with the items in transit, as they will be queued.
To use this feature, set the injectOptimisticId
parameter to true
.
Locally, you'd still be calling $optimized.addTask(text)
, but the ID will be injected server-side.
Ready-made CRUD functions
The most commonly used functions are implemented out of the box using the crud
parameter.
Setting this to create
, update
, or delete
will look at your PHP function's parameters using reflection and automatically generate the Javascript function for you.
You also need to supply the model
parameter, which is then used to only allow updates to fillable
attributes.
Testing
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
- Lukas Mateffy
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
All versions of livewire-optimistic-ui with dependencies
spatie/laravel-package-tools Version ^1.16
illuminate/contracts Version ^10.0||^11.0