phpreact / component

v1.1.0 2021-08-01 20:40 UTC

MIT

• Safouane Ahmed Salah

• php
• component
• react

Published on Packagist.org on 2021-08-01 20:40 UTC

README

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:

composer require phpreact/component

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

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;