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 %}
Symfony logo

UX React

Loading...

Install It

$ composer require symfony/ux-react