Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/g3n1us/laravel-react-sync
React components that update Laravel
https://github.com/g3n1us/laravel-react-sync
Last synced: 24 days ago
JSON representation
React components that update Laravel
- Host: GitHub
- URL: https://github.com/g3n1us/laravel-react-sync
- Owner: g3n1us
- License: gpl-3.0
- Created: 2018-03-27T22:33:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-12-16T02:45:56.000Z (about 4 years ago)
- Last Synced: 2024-11-13T14:53:48.034Z (about 1 month ago)
- Language: JavaScript
- Size: 5.53 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Laravel React Sync
Make your React components and Laravel models play nicely!
## Installation
**Install using Composer:**
```
composer require g3n1us/laravel-react-sync
```
> Note: The next step will be unnecessary in most cases
If using Laravel 5.5 or later and autodiscovery is not disabled, the package will be discovered and ready to use automatically. If NOT, then add the service provider to the list of providers in `config/app.php`.
```php
'providers' => [
/*
* Application Service Providers...
*/
G3n1us\LaravelReactSync\LaravelReactSyncServiceProvider::class,
]
```
## Run `react-sync` Preset
If this you are installing the library on a fresh Laravel installation, run the `preset` Artisan command to complete installation
> Note: If this is NOT a fresh installation, do no run this command. Instead, you can run `php artisan vendor:publish` to copy the necessary files into your resources directory.
```
php artisan preset react-sync
```
Follow the onscreen instructions, and run:
```
npm install && npm run dev
```
Installation is complete!
## Usage
`ReactSync` provides two base components to be used in the place of the standard `React.Component`. The first `MasterComponent` is hydrated with the Laravel view's data. This is set via an `include`d Blade template in the top of your application's markup. The provides a global object that contains application data that maps to the data that is part of the context of the Blade view. Additionally, this object contains objects and methods that provide access to the underlying Laravel application's data, such as the `Request`, defined `Guard`s, the `Route` and the authenticated user.
This data can be used in components extending this class. Changes set via a traditional web form (or form fields) will mutate your `state` and trigger a render as you would expect in React.
Alternately, the `ReactSyncAppData.page_data` object can be mutated manually to trigger a refresh, as this object is set as the components initial `state`.
GH Pages URL https://g3n1us.github.io/laravel-react-sync/