React Component Rendering
Render React from inside Twig
Built a React component? Render it quickly & easily in Twig and pass in dynamic props.
composer require symfony/ux-react
import React, { Component } from 'react';
import PackageList from '../components/PackageList.js';
export default class extends Component {
constructor() {
super();
this.state = {
search: ''
}
}
render() {
return (
<div>
<input
type="search"
placeholder="This search is built in React!"
className="form-control"
value={this.state.search}
onChange={(event) => this.setState({search: event.target.value})}
/>
<div className="mt-3">
<PackageList packages={this.filteredPackages()} />
</div>
</div>
);
}
filteredPackages() {
if (!this.state.search) {
return this.props.packages;
}
return this.props.packages.filter((uxPackage) => {
return uxPackage.humanName.toLowerCase().includes(this.state.search.toLowerCase())
});
}
}
{% extends 'base.html.twig' %}
{% block body %}
<div {{ react_component('PackageSearch', {
packages: packagesData
}) }}>
Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
</div>
{% endblock %}
UX React
Loading...
Install It
$ composer require symfony/ux-react