{reactData}
Writes the mount point of a React component, its data from a provider in _providers/ as JSON in an attribute.
Syntax
{reactData id='products'}
{reactData id='products', provider='catalog', type='array'}Options
-
id -
The id of the
<div>, and the key the result is kept under in$padProviders- defaultmyReactId. -
provider -
The file
_providers/<name>.phpthat answers the data - default the id. A plain name only. -
type -
checkturns the result into 1 or 0; otherwise (record, the default, orarray) it is passed as the provider returned it.
Description
{reactData id='products'} runs the provider _providers/products.php and writes <div id="products" data="..."></div>, the provider's result as JSON, HTML-escaped for the attribute. A React component mounted on the div reads it with JSON.parse ( el.getAttribute ( 'data' ) ) - getAttribute, not dataset.data, which reads data-data.
provider= names another file than the id; it must be a plain name, so no path outside _providers/ can be run. The result keeps the types the provider gave it - numbers stay numbers, a text like "007" stays a text. It is also kept in $padProviders under the id, for a later provider. type='check' collapses it to 1 or 0.
The tag writes an empty element whose meaning only a script brings out, so the examples are shown rather than run. For new work the islands pattern of the react application is the more general route: <div data-island="Name" data-props="{^field}"> with the props from the page's own PHP. See docs/REACT.md.
Examples
A mount point with data
_providers/products.php answers the rows; the div carries them as JSON for the component.
<h2>Products</h2>
{reactData id='products'}
<script src="{asset 'products.js'}" type="module"></script>Another provider, and a check
The id names the element, provider= the file; type='check' answers 1 or 0.
{reactData id='bestSellers', provider='products', type='array'}
{reactData id='hasStock', provider='stock', type='check'}