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

assets/react/src/controllers/PackageSearch.jsx

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())
        });
    }
}

templates/ux_packages/react.html.twig

{% extends 'base.html.twig' %}

{% block body %}
    <div {{ react_component('PackageSearch', {packages: packagesData}) }}>
        Loading...
    </div>
{% endblock %}

UX React

Install It

$ composer require symfony/ux-react