PHPackages                             phpreact/component - 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. [Framework](/categories/framework)
4. /
5. phpreact/component

ActiveLibrary[Framework](/categories/framework)

phpreact/component
==================

create web app via php react like component based

v1.1.0(4y ago)114MITPHP

Since May 1Pushed 4y ago1 watchersCompare

[ Source](https://github.com/safouane-ahmed-salah/PHP-React-Component)[ Packagist](https://packagist.org/packages/phpreact/component)[ Docs](https://github.com/safwan39/PHP-React-Component)[ RSS](/packages/phpreact-component/feed)WikiDiscussions master Synced today

READMEChangelog (7)DependenciesVersions (9)Used By (0)

PHP-React-Component
===================

[](#php-react-component)

This project aims to mimic react component in php

it's one of the elegant solution to make component based web app via php

Installation:
=============

[](#installation)

`composer require phpreact/component`

Usage:
======

[](#usage)

To create a component you neet to just extend React\\Component class

```
namespace React\Tag;
use React\Component;

class CustomComponent extends Component{
    function render(){
        return new div(['style'=> 'border:1px solid #eee;border-radius:4px;max-width:500px;padding:5px;margin:10px'],[
            new p(['style'=> 'color:red;background:blue'], 'Hello World'),
            new div('Many div')
        ]);
    }
}
```

HTML tags are create via the React Component class all HTML tags are under namespace React\\Tag

To register custom html tag you just call a static function registerTag

```
React\Tag::register('tag1');
React\Tag::register(['newtag1', 'newtag2']); //multiple html tags
```

To render your app

```
echo new CustomComponent;
```

we can now have the ability to mimic reactjs state management.

there some slight difference in apply setState as we need to connect js event setState to php component

Note: make sure the component is wrapped by htmltag (ie: p, div, ...)

```
class CustomComponent extends Component{
    var $state = ['test' => 1];

    function componentDidUpdate($prevState, $currState){} //run only when there's state update

    function render(){
        $test = $this->state->test;

        return new div(['style'=> 'border:1px solid #eee;border-radius:4px;max-width:500px;padding:5px;margin:10px'],[
            new p(['style'=> 'color:red;background:blue'], 'Hello World',),
            new div('Many div'),
            new button(['onclick'=> "this.setState({test: ".($test+1)."})"], "set my state ($test)")
        ]);
    }
}
```

Sample full example
===================

[](#sample-full-example)

```
namespace React\Tag;
use React\Component;

include_once 'vendor/autoload.php';

//functional Component
function Cars($children = [], $text){
    return new div(['style'=>'display:flex'], array_map(function($v) use($text){
        return  new Car(['text'=> $v . $text]);
    }, $children));
}

function Car($text = ''){
    $state = \React\useState(['test'=> 1]);
    return new div(['onclick'=> 'this.setState(function(state){ return {test: state.test + 1}})','style'=> [
        'color'=> '#fff',
        'border-style'=>'solid',
        'border-radius'=> 2,
        'padding'=>5,
        'border-color'=> 'red',
        'border-width'=> 2,
        'margin' => 5,
        'background'=> 'brown',
        'width'=> '100%',
        'text-align'=> 'center'
        ]], $text . ' '. $state->test);
}

class App extends Component{
    function render(){
        return [
            new div(['style'=>'color:red'],'test world'),
            new div(['style'=>'color:red'], 'cool'),
            new Cars(['text'=> ' hello world'],['Volsvagen', 'Kia', 'via']),
        ];
    }
}

echo new App;
```

###  Health Score

26

—

LowBetter than 41% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity58

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 66.7% 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 ~15 days

Recently: every ~23 days

Total

7

Last Release

1797d ago

Major Versions

v0.4.0 → 1.0.02021-07-29

### Community

Maintainers

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

---

Top Contributors

[![safwan39](https://avatars.githubusercontent.com/u/130032583?v=4)](https://github.com/safwan39 "safwan39 (4 commits)")[![safouane-ahmed-salah](https://avatars.githubusercontent.com/u/53286721?v=4)](https://github.com/safouane-ahmed-salah "safouane-ahmed-salah (2 commits)")

---

Tags

htmlhtml-tagsphp-componentreactsetstatephpcomponentreact

### Embed Badge

![Health badge](/badges/phpreact-component/health.svg)

```
[![Health](https://phpackages.com/badges/phpreact-component/health.svg)](https://phpackages.com/packages/phpreact-component)
```

###  Alternatives

[kompo/kompo

Laravel & Vue.js FullStack Components for Rapid Application Development

12014.8k49](/packages/kompo-kompo)[pestphp/pest-plugin-stressless

Stressless plugin for Pest

681.0M17](/packages/pestphp-pest-plugin-stressless)[alleyinteractive/pest-plugin-wordpress

WordPress Pest Integration

274.0k1](/packages/alleyinteractive-pest-plugin-wordpress)

PHPackages © 2026

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