{"@attributes":{"version":"2.0"},"channel":{"title":"meh.dev","description":{},"link":"https:\/\/meh.dev\/","pubDate":"Wed, 25 Mar 2026 05:47:37 +0000","lastBuildDate":"Wed, 25 Mar 2026 05:47:37 +0000","generator":"Jekyll v4.4.1","item":[{"title":"Rendering React via a Symfony Twig Extension","description":"

Looking for an easier way to render individual React components from Twig? Here\u2019s what I came up with on a recent project using a Twig Extension.<\/p>\n\n

The project & samples were written using Symfony 6 with Encore and Webpack.<\/p>\n\n

Configure an Entrypoint in Webpack & Encore<\/h1>\n

The entry script must be loaded on any page you want to render a component. You can create a single bundle and reuse it across many components and pages, or create multiple bundles.<\/p>\n\n

In my application and this example I use a shared components<\/code> bundle which can be accessed on any page.<\/p>\n\n

Add an entrypoint to your webpack.config.js<\/code>.<\/p>\n

.addEntry('components', '.\/assets\/components.tsx')\n<\/code><\/pre>\n\n
Load the bundle on a page (or entire layout). This uses Encore inside a Twig file.<\/p>\n\n
{{ encore_entry_script_tags('components') }}<\/code><\/pre><\/figure>\n\n
Create components.tsx<\/h1>\n
Create the components.tsx and add each component you want to load to the componentMap<\/code> variable.<\/p>\n\n
import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport EmbedModal from \".\/components\/EmbedModal\";\n\nconst componentMap = {\n    'EmbedModal': EmbedModal,\n};\n\nfunction getComponentByName(componentName: string) {\n    const Component = componentMap[componentName];\n    if (Component) {\n        return Component;\n    } else {\n        console.error(`Unknown component: ${componentName}`);\n    }\n}\n\ndocument.querySelectorAll('.react-container').forEach(container => {\n    \/\/ @ts-ignore\n    const componentName = container.dataset.component;\n    \/\/ @ts-ignore\n    const props = JSON.parse(container.dataset.props);\n\n    const Component = getComponentByName(componentName);\n    ReactDOM.render(<React.StrictMode><Component {...props} \/><\/React.StrictMode>, container);\n});\n<\/code><\/pre>\n\n
This example is fairly naive, you could make the componentMap more magical if you\u2019d like, but for a small number of components it\u2019s easy to manage them manually.<\/p>\n\n
Create the TwigExtension<\/h1>\n\n
<?php\n\nnamespace App\\Twig;\n\nuse Twig\\Extension\\AbstractExtension;\nuse Twig\\TwigFunction;\n\nclass TwigExtension extends AbstractExtension\n{\n    public function getFunctions()\n    {\n        return [\n            new TwigFunction('renderReactComponent', [$this, 'renderReactComponent'], ['is_safe' => ['html']]),\n        ];\n    }\n\n    public function renderReactComponent($componentName, $props = null): string\n    {\n        if (is_null($props)) {\n            $props = [];\n        }\n        $prop_str = json_encode($props);\n        $prop_str = htmlspecialchars($prop_str, ENT_QUOTES, 'UTF-8');\n\n        return <<<HTML\n                <div class=\"react-container inline\" data-component=\"{$componentName}\" data-props=\"{$prop_str}\"><\/div>\n            HTML;\n    }\n}\n\n<\/code><\/pre>\n\n
Make sure your extension is loaded by Symfony, this might happen automatically or you may have to add the service manually.<\/p>\n\n
Render a Component<\/h1>\n
Now you\u2019re ready to render! Call the Twig extension anywhere in your twig files where you want a react component to appear.<\/p>\n\n
{{ renderReactComponent('EmbedModal', {\n        'name': event.name,\n        'embed_url': event.getEmbedUrl(),\n}) }}<\/code><\/pre><\/figure>\n","pubDate":"Mon, 01 Apr 2024 02:16:40 +0000","link":"https:\/\/meh.dev\/render-react-component-twig","guid":"https:\/\/meh.dev\/render-react-component-twig","category":["PHP","Symfony","Twig","React"]},{"title":"Development with Docker, Apache, PHP, and SSL","description":"
This post goes through a sample project I built that shows this off using docker, apache, php, and xdebug for local development.<\/p>\n\n
Want to skip straight to the complete sample project? Click here!<\/a><\/p>\n\n
Project Overview<\/strong><\/p>\n