PHPackages                             dgvirtual/codeigniter4-components - 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. dgvirtual/codeigniter4-components

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

dgvirtual/codeigniter4-components
=================================

Codeigniter 4 Components library which allows creating custom HTML elements to use within view files

243PHPCI failing

Since Jan 12Pushed 7mo ago1 watchersCompare

[ Source](https://github.com/dgvirtual/codeigniter4-components)[ Packagist](https://packagist.org/packages/dgvirtual/codeigniter4-components)[ RSS](/packages/dgvirtual-codeigniter4-components/feed)WikiDiscussions develop Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (0)

Components for Codeigniter 4
============================

[](#components-for-codeigniter-4)

[![Build Status](https://github.com/dgvirtual/codeigniter4-components/actions/workflows/phpunit.yml/badge.svg)](https://github.com/dgvirtual/codeigniter4-components/actions/workflows/phpunit.yml/badge.svg)[![Coverage](https://camo.githubusercontent.com/0fb9a287eacb4bb648d358cabc9f98f396721d33d2367a3c32915d6b47b4adfa/68747470733a2f2f636f6465636f762e696f2f67682f64677669727475616c2f636f646569676e69746572342d636f6d706f6e656e74732f6272616e63682f646576656c6f702f67726170682f62616467652e737667)](https://camo.githubusercontent.com/0fb9a287eacb4bb648d358cabc9f98f396721d33d2367a3c32915d6b47b4adfa/68747470733a2f2f636f6465636f762e696f2f67682f64677669727475616c2f636f646569676e69746572342d636f6d706f6e656e74732f6272616e63682f646576656c6f702f67726170682f62616467652e737667)

PHP library *Components for Codeigniter 4* allows you to create custom HTML elements to use within your views. They allow to encapsulate html and css classes/styles into reusable website building blocks with the content and attributes of your choosing. They are written in regular PHP/CSS/HTML. Such custom HTML elements can include other HTML elements (custom or default).

Custom component tag always starts with `x-` (like `Click Me!`).

To illustrate, with Components you write this in your view:

```

```

Which, is merged with the Component definition:

```

>

```

And results in this in the browser:

```

  Click Me!

```

Composer Installation
---------------------

[](#composer-installation)

To install in an *existing composer project*, run in command line:

```
composer require dgvirtual/codeigniter4-components:dev-develop
```

Manual Installation
-------------------

[](#manual-installation)

Let's say you want to put the library into the `app/ThirdParty` directory.

1. Download and unzip the code, copy the `codeigniter4-components` folder to the `app/ThirdParty` directory.
2. To enable Codeigniter to find the library, edit the `app/Config/Autoload.php`file, add the Components library to the `$psr4` property:

```
public $psr4 = [
  APP_NAMESPACE => APPPATH,
  'Dgvirtual\Components' => APPPATH . 'ThirdParty/codeigniter4-components/src', // this line
];
```

Configuration
-------------

[](#configuration)

Edit the `app/Config/View.php` file. Add the following array element to the `$decorators` property:

```
public array $decorators = [
  'Dgvirtual\Components\Libraries\ComponentDecorator', // this line
];
```

Try If It Works
---------------

[](#try-if-it-works)

**To check if it works with the example components**, put the string `This should look like a button` in any of your views and see if it renders as a button (if not, all you will see will be simple text).

Now you can make some components of your own and put them in `app/Views/Components` folder to make them usable in your app views.

How To Write and Use Components
-------------------------------

[](#how-to-write-and-use-components)

Example components of all three types listed below are available in the `src/Components` folder of the project. They can be used immediately.

### Self-Closing Tag Components

[](#self-closing-tag-components)

At their most basic, components serve as dynamic templates that allow you to reduce the typing in your application. This can help boil longer, complex sections down to a single HTML tag. This is especially useful with CSS utility frameworks like TailWind, or when using the utilities in Bootstrap 5, etc. Using components in these situations allows you to keep the style info in one place where making changes to one file changes every instance of the view throughout the application.

To create a component, simply create a new view file within the `app\Views\Components` directory or another place made accessible as described in the installation step 4 above.

A simple avatar image component `avatar.php` might look something like this:

```