Download the PHP package geekycodelab/wp_react_loader without Composer
On this page you can find all versions of the php package geekycodelab/wp_react_loader. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download geekycodelab/wp_react_loader
More information about geekycodelab/wp_react_loader
Files in geekycodelab/wp_react_loader
Package wp_react_loader
Short Description A small library for loading react projects in WordPress plugins
License MIT
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package wp_react_loader
WpReactLoader - A Composer Library for WordPress Developers
WpReactLoader is a composer library designed to simplify the process of loading React frontend projects in WordPress and passing data to them, a process known as localizing the script.
WpReactLoader solves the problem where a script may be manipulating the DOM after the page is loaded and you receive an error like this:
Features
- Easy loading of React frontend projects in WordPress.
- Simplified data passing (script localization) to the frontend.
Installation
To install WpReactLoader, you need to have Composer installed on your machine. If you don't have it installed, you can download it from here.
Once you have Composer installed, you can install WpReactLoader by running the following command in your terminal:
Usage
After installing the library, you can use it in your WordPress plugin or theme like this:
This will load the React application from the specified JavaScript file and pass the specified data in a global JS variable called gcl_settings. You can set the global variable name by including 'localization_variable' key in the constructor array.
The load_resource method generates HTML code and returns it as a string. This output can be used directly in your code, either by echoing it or by returning it within a shortcode.
You can also set, get, and remove data parameters like this:
Options
When creating a new instance of the UI class, you can pass an array of options to the constructor. Here are all the possible options:
assets_url(string): The URL to the directory where your JavaScript file is located. Default is an empty string.js_file(string): The name of your JavaScript file. Default is an empty string.data(array): An array of data that you want to pass to your JavaScript file. Default is an empty array.container_id(string): The ID of the HTML container where your React app will be loaded. Default is 'app'.container_class(string): The class of the HTML container where your React app will be loaded. Default is an empty string.include_admin_ajax_url(bool): Whether to include the admin-ajax.php URL in the data passed to the frontend. Default is true.localization_variable(string): The name of the global JavaScript variable where your data will be stored. Default is 'gcl_settings'.
Here's an example of how to use these options:
This will load the React application from the specified JavaScript file into an HTML container with the ID 'myApp' and the class 'myClass', and pass the specified data to a global JavaScript variable called 'myData'. The admin-ajax.php URL will not be included in the data.
Methods
The UI class provides the following methods:
-
__construct(array $options = []): The constructor accepts an array of options. See the Options section for more details. -
set_param(string $key, mixed $value): This method allows you to set a parameter in the data array. The$keyis the name of the parameter and$valueis the value of the parameter. -
get_param(string $key): This method allows you to get a parameter from the data array. The$keyis the name of the parameter. If the parameter does not exist, it returnsnull. load_resource(): This method loads the React application. It returns a string of HTML that includes the script tag to load the JavaScript file and the div where the React app will be mounted.
Here's an example of how to use these methods:
This will load the React application from the specified JavaScript file into an HTML container with the ID 'myApp' and the class 'myClass', and pass the specified data to a global JavaScript variable called 'myData'. The admin-ajax.php URL will not be included in the data.
Method Chaining
The set_param method returns the UI object, enabling method chaining. Here's an example using the set_param method from the UI class:
In this example, each call to set_param returns the UI object itself, allowing another set_param call to be made on the same line. This is more concise and often more readable than making each call on a separate line. The final call to load_resource is made on a new line because it does not return the UI object and therefore cannot be chained.
This explanation should help users of your class understand how they can use method chaining to make their code more concise and readable.
