React Component Rendering

Render React from inside Twig

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)
        });
    }
}
Symfony logo

UX React

Loading...

Install It

$ composer require ux symfony/ux-react
$ npm install --force
$ npm run watch