PHPackages                             corneltek/twig-react-directive - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. corneltek/twig-react-directive

ActiveLibrary[Templating & Views](/categories/templating)

corneltek/twig-react-directive
==============================

1.1.3(9y ago)25371[1 issues](https://github.com/corneltek/TwigReactDirective/issues)3MITPHPPHP >=5.4.0

Since Apr 23Pushed 9y ago2 watchersCompare

[ Source](https://github.com/corneltek/TwigReactDirective)[ Packagist](https://packagist.org/packages/corneltek/twig-react-directive)[ RSS](/packages/corneltek-twig-react-directive/feed)WikiDiscussions master Synced 4w ago

READMEChangelogDependencies (3)Versions (7)Used By (3)

Twig ReactDirective Extension
=============================

[](#twig-reactdirective-extension)

Since ReactJS component could be renderred partially in an app, this extension converts reactapp directive into HTML and JavaScript. Let you write readable code in your twig templates.

Install
-------

[](#install)

```
composer require corneltek/twig-react-directive "*"

```

Usage
-----

[](#usage)

```
use TwigReactDirective\ReactDirectiveExtension;

$twig = new Twig_Environment($loader);
$twig->addExtension(new ReactDirectiveExtension);
```

Template Example
----------------

[](#template-example)

```
{% reactapp "MyApp" with { title: 'Todo List' , items: [ ... ] } %}

{% set config = { ... } %}
{% reactapp "MyApp" with config %}
```

The code above outputs:

```

if (typeof __dom_ready === "undefined") {
  function __dom_ready(cb) {
    var d = document;
    var hack = d.documentElement.doScroll;
    var loaded = (hack ? /^loaded|^c/ : /^loaded|^i|^c/).test(d.readyState)
    if (!loaded) {
      d.addEventListener("DOMContentLoaded", function(){
        d.removeEventListener("DOMContentLoaded", arguments.callee, false );
        cb();
      }, false);
    }
    if (loaded) {setTimeout(cb, 0);}
  }
}
(function() {
  var ready = typeof jQuery !== "undefined" ? jQuery : __dom_ready;
ready(function() {
  var app = React.createElement(MyApp, {"title":"test title"});
  React.render(app, document.getElementById("MyApp123fa9ef"));
});

})();

```

###  Health Score

28

—

LowBetter than 52% of packages

Maintenance10

Infrequent updates — may be unmaintained

Popularity16

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity62

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~34 days

Recently: every ~42 days

Total

6

Last Release

3550d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/3cc34cde233b660869ff329ed8e20df611f75dfb61aab3e30889ac153d3e5e61?d=identicon)[c9s](/maintainers/c9s)

---

Top Contributors

[![c9s](https://avatars.githubusercontent.com/u/50894?v=4)](https://github.com/c9s "c9s (27 commits)")

### Embed Badge

![Health badge](/badges/corneltek-twig-react-directive/health.svg)

```
[![Health](https://phpackages.com/badges/corneltek-twig-react-directive/health.svg)](https://phpackages.com/packages/corneltek-twig-react-directive)
```

###  Alternatives

[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3861.2M](/packages/limenius-react-bundle)[area17/laravel-auto-head-tags

Laravel Auto Head Tags helps you build the list of head elements for your app

4616.0k](/packages/area17-laravel-auto-head-tags)[jelix/wikirenderer

WikiRenderer is a library to generate HTML or anything else from wiki content.

1712.2k1](/packages/jelix-wikirenderer)[webkinder/sproutset

A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects.

281.8k](/packages/webkinder-sproutset)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)