Leaf UI [WIP v0.2.0]

Leaf UI is a PHP library for building user interfaces.

Leaf UI doesn't need a new compiler or any extensive compiling, it's just the same old PHP you write everyday; as such, you can build full scalable Leaf UI powered apps or just sprinkle Leaf UI into your existing HTML/PHP code.

v0.2.0 of Leaf UI is currently in development. It's a complete rewrite of the library and will be released soon. It comes with a lot of new features and a new API. Leaf UI v0.2.0 will allow you to build full scalable Leaf UI powered apps, write reactive UIs all in PHP. You can think of it as a PHP version of React.

Installing Leaf UI

Like most PHP libraries, we recommend installing Leaf UI with composer. Just open up your console and type:

composer require leafs/ui

Or install the next version of Leaf UI:

composer require leafs/ui@dev-next

This will install Leaf UI into your application. You don't have to worry about bloating your application: Leaf UI has no external dependencies.

After this, you can use all of Leaf UI's methods and components.

View the documentation here

Building your first Leaf UI

Since Leaf UI is modelled after React, everything is a component. You can create your own components and handle your application state in them.

<?php

use Leaf\UI\Core;
use Leaf\UI\Component;

class Test2 extends Component
{
    public $count = 1;

    public function increment()
    {
        $this->count = $this->count + 1;
    }

    public function decrement()
    {
        $this->count = $this->count - 1;
    }

    public function render()
    {
        return Core::createElement('body', [], [
            Core::createElement('div', [], [
                Core::createElement('div', [], 'Static text'),
                Core::createElement('button', ['@click' => 'decrement'], '-'),
                Core::createElement('h1', [], $this->count),
                Core::createElement('button', ['@click' => 'increment'], '+'),
            ]),
        ]);
    }
}

This component renders some static text, a button to decrement a counter, a counter and a button to increment the counter. The counter is stored in the component's state and is updated when the buttons are clicked.

To actually make this work, you simply need to render this component wherever you want it to appear.

<?php

use Leaf\UI\Core;

require_once __DIR__ . '/vendor/autoload.php';

echo Core::render(new Test2());

The most beautiful part about all this is that it can run outside Leaf. It is completely independent of Leaf and can be used in any PHP application.

This file is still being updated!

💬 Stay In Touch

📓 Learning Leaf 3

Leaf has a very easy to understand documentation which contains information on all operations in Leaf.
You can also check out our youtube channel which has video tutorials on different topics
We are also working on codelabs which will bring hands-on tutorials you can follow and contribute to.

😇 Contributing

We are glad to have you. All contributions are welcome! To get started, familiarize yourself with our contribution guide and you'll be ready to make your first pull request 🚀.

To report a security vulnerability, you can reach out to @mychidarko or @leafphp on twitter. We will coordinate the fix and eventually commit the solution in this project.

Code contributors

_{Michael Darko}

🤩 Sponsoring Leaf

Your cash contributions go a long way to help us make Leaf even better for you. You can sponsor Leaf and any of our packages on open collective or check the contribution page for a list of ways to contribute.

And to all our existing cash/code contributors, we love you all ❤️

View the sponsors page to see all our sponsors.

onemoreahmad / leaf-ui