PHPackages                             vishu-b/yii2-react - 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. [Utility & Helpers](/categories/utility)
4. /
5. vishu-b/yii2-react

ActiveYii2-extension[Utility & Helpers](/categories/utility)

vishu-b/yii2-react
==================

Yii 2 widget for server-side rendering ReactJs

04PHP

Since Jun 1Pushed 5y agoCompare

[ Source](https://github.com/vishuB/yii2-react)[ Packagist](https://packagist.org/packages/vishu-b/yii2-react)[ RSS](/packages/vishu-b-yii2-react/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (0)

Yii2-React
==========

[](#yii2-react)

This is Yii2 widget that able to use [ReactJS](https://facebook.github.io/react/) components in your Yii2 app, with options of server-side rendering.

Installation
============

[](#installation)

This widget require [v8js](https://pecl.php.net/package/v8js) php extesion. How to setup V8Js PHP extension? Use the links below:

- [On Linux](https://github.com/phpv8/v8js/blob/master/README.Linux.md)
- [On MacOs](https://github.com/phpv8/v8js/blob/master/README.MacOS.md)
- [On Windows](https://github.com/phpv8/v8js/blob/master/README.Win32.md)

### Composer

[](#composer)

Set the `minimum-stability` in your composer.json to `dev`2. This widget compile react bundle from npm react and react-dom packages using browserify and uglify-js *BUT* since composer run scripts only for root composer.json, need to add the following lines to your composer.json:

```
...
"scripts": {
"regenerate_react_bundle": [
   "vendor/b-tokman/yii2-react/build-bundles.sh"
],
"post-install-cmd":[
   "@regenerate_react_bundle",
],
"post-update-cmd": [
   "@regenerate_react_bundle",
]
...

```

This way composer will run browserify to create react-bundle.js and uglifyjs to minify it, each time after upgrade or install

2. Then run

```
  $ composer require vishu-b/yii2-react
```

Composer will download yii2-react package with all dependenices, then npm will download react and react-dom npm packages and scripts will compile it.

Usage
=====

[](#usage)

After the installation you'll be able to use the `vishuB\react\widgets\ReactRenderer` widget in your app.

```
ReactRenderer::widget([
    'componentsSourceJs' => ,
    'component' => ,
    'props' => [props],
    'options' => [options],
    'useTranspiler' => true //or false
])
```

- `componentsSourceJs` - path to your react components js file
- `component` - the name of global variable the contain your React component, you also can use [namespased components](https://facebook.github.io/react/docs/jsx-in-depth.html#namespaced-components) by dot-notation
- `props` - [props](https://facebook.github.io/react/docs/components-and-props.html) array that'll be passed to your component

- `options` - Array of options that you can pass to widget:
    - `prerender` - Tells widget to render your component server-side, by default - `true`
    - `tag` - The tag of the element where your component would be passed
    - *html attributes* - HTML attribute that will be added to the wrapper element of your component. Example: `'id' => 'root'`.
- `useTranspiler` - boolean, whatever to transpile js code, using bable or not. If you dont have JSX or other specific syntax, dont use transpiler, to save some time

### All your reactJs components must be in `window` scope.

[](#all-your-reactjs-components-must-be-in-window-scope)

Example
=======

[](#example)

In your view file:

```
echo ReactRenderer::widget([
    'componentsSourceJs' => 'js/main.js',
    'component' => 'Main',
    'props' => [ 'title' => 'Hello' ],
]);
```

Example `main.js`

```
class Main extends React.Component {
    render() {
        let title = this.props.title;
        return React.createElement(
            "main",
            null,
            React.createElement("div", null, title)
        );
    }
}
window.Main = Main;
```

Namespased components:

```
echo ReactRenderer::widget([
      'componentsSourceJs' => 'js/layout.js',
      'component' => 'Layout.Header',
      'props' => ['title' => 'Hello'],
]);
```

Example `layout.js`

```
class Header extends React.Component {
    render() {
        let title = this.props.title;
        return React.createElement(
            "header",
            null,
            React.createElement("div", null, title)
        );
    }
}
class Layout extends React.Component {
    render() {
        return React.createElement(
            "div",
            null,
            React.createElement(Layout.Header, {title: this.props.title})
        );
    }
}
Layout.Header = Header;
window.Header = Header;
```

###  Health Score

19

—

LowBetter than 10% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity3

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity39

Early-stage or recently created project

 Bus Factor1

Top contributor holds 75.6% 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.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/22771534?v=4)[vishal46](/maintainers/vishal46)[@vishal46](https://github.com/vishal46)

---

Top Contributors

[![bTokman](https://avatars.githubusercontent.com/u/23096113?v=4)](https://github.com/bTokman "bTokman (65 commits)")[![vishuB](https://avatars.githubusercontent.com/u/13677102?v=4)](https://github.com/vishuB "vishuB (13 commits)")[![wiperawa](https://avatars.githubusercontent.com/u/14181470?v=4)](https://github.com/wiperawa "wiperawa (8 commits)")

### Embed Badge

![Health badge](/badges/vishu-b-yii2-react/health.svg)

```
[![Health](https://phpackages.com/badges/vishu-b-yii2-react/health.svg)](https://phpackages.com/packages/vishu-b-yii2-react)
```

###  Alternatives

[assetic/framework

Asset Management for PHP

1001.4M20](/packages/assetic-framework)

PHPackages © 2026

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