React Component Rendering
Built a React component? Render it quickly & easily in Twig and pass in dynamic props.
templates/react.html.twig
{#
"PackageSearch" mounts assets/react/controllers/PackageSearch.jsx.
"packagesData" is dynamic data, which becomes the "packages" prop!
#}
<div {{ react_component('PackageSearch', {
packages: packagesData
}) }}>
Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
</div>
assets/react/controllers/PackageSearch.jsx
import React, { Component } from 'react';
export default class extends Component {
constructor() {
super();
this.state = { search: '' };
}
render() {
return (
<div>
<input
value={this.state.search}
onChange={(event) => this.setState({search: event.target.value})}
/>
<div className="row">
{this.filteredPackages().map(item => (
<a key={item.name} href={item.url}>
<img src={item.imageUrl} />
<h4>{item.humanName}</h4>
</a>
))}
</div>
</div>
);
}
filteredPackages() {
return this.props.packages.filter((uxPackage) => {
return uxPackage.humanName.includes(this.state.search)
});
}
}
UX React
$ composer require ux symfony/ux-react
$ npm install --force
$ npm run watch