PHPackages                             helsingborg-stad/component-library - 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. helsingborg-stad/component-library

ActiveWordpress-muplugin[Utility & Helpers](/categories/utility)

helsingborg-stad/component-library
==================================

A library of components for use in WordPress

5.24.2(1w ago)427.6k↓17.6%4[4 issues](https://github.com/helsingborg-stad/component-library/issues)[8 PRs](https://github.com/helsingborg-stad/component-library/pulls)5MITPHPPHP ^8.0CI failing

Since Feb 4Pushed 1w ago8 watchersCompare

[ Source](https://github.com/helsingborg-stad/component-library)[ Packagist](https://packagist.org/packages/helsingborg-stad/component-library)[ RSS](/packages/helsingborg-stad-component-library/feed)WikiDiscussions main Synced 2d ago

READMEChangelog (10)Dependencies (30)Versions (1101)Used By (5)

Component Library
=================

[](#component-library)

A library of blade components compatible with WordPress.

Known issues
------------

[](#known-issues)

Have any issues? This list is your first resort.

- **Components refuse to show up shortly after creation.**This is due to the fact that component aliases are cached. Flush blade cache in order to display the component. If you are encountering this issue, you may be able to utilities the component name directly by referring to @component.component instead of @component.

Example usage
-------------

[](#example-usage)

A registered component can be utilized as a component or directive just as in laravel. They do however have the added functionality to load the controller before render to enshure that stuff is formatted and defined.

### Render a component

[](#render-a-component)

```
@icon(['icon' => 'apps', 'size' => 'md'])
@endicon
```

Data flow
---------

[](#data-flow)

Base controller components This controller handles all data flow to every component. There are multiple ways of inputting data to a component.

1. The default configuration of the component. These settings are made in the configuration json in each component folder. All variables used in the controller SHOULD be declared here. This is to avoid undeclared variabe varnings.
2. By populating the directive (in view file). This should be data that idicates states like isDisabled => true etc. This is the main location of end user customization.
3. By data manipulation in the controller connected to each component. This data can be in every form, but should focus on translating other input to view data. This file can contain clear-text-classes.

Example:

```
if($isDisabled) {
    $this->classList[] = 'disabled';
}
```

Filters
-------

[](#filters)

When component library is used in WordPress. Filters are enabled to allow for filtering from WordPress. There are multiple filters for each component.

Filter (General): BladeComponentLibrary/Component/Data - Takes $data

Filter (Component specific): ComponentLibrary/Component/ComponentName/Data - Takes $data

Filter class (General): ComponentLibrary/Component/Class - Takes $class

Filter class (Component specific): ComponentLibrary/Component/ComponentName/Class - Takes $class

Each data attribute also has a corresponding filter eg. ComponentLibrary/Component/ComponentName/dataVar

### Additional paths (WordPress Specific)

[](#additional-paths-wordpress-specific)

You may ask the component library to render more view paths by using the ComponentLibrary/ViewPaths filter. Simply add another path to the component library by doing the following:

```
add_filter('ComponentLibrary/ViewPaths', function($viewPaths) (
  if(is_array($viewPaths)) {
    $viewPaths = [];
  }
  $viewPaths[] = "/path/to/plugin/views";
  return $viewPaths;
));

```

### Iframe

[](#iframe)

#### ComponentLibrary/Component/Iframe/GetSuppliers

[](#componentlibrarycomponentiframegetsuppliers)

Alter the list of pre-defined suppliers (sources) for iframes

- `@param array $suppliers` - Array containing the suppliers as Supplier objects

```
apply_filters('ComponentLibrary/Component/Iframe/GetSuppliers', $suppliers );
```

```
add_filter('ComponentLibrary/Component/Iframe/GetSuppliers', function($suppliers) {
return $suppliers;
}, 10, 1 );
```

### Icon

[](#icon)

#### ComponentLibrary/Component/Icon/AltTextPrefix

[](#componentlibrarycomponenticonalttextprefix)

Alter the prefix used when describing icons.

- `@param string $altTextPrefix` - String containing prefix for alt text.

```
add_filter('ComponentLibrary/Component/Icon/AltTextPrefix', function($altTextPrefix) {
  return $altTextPrefix;
}, 10, 1 );
```

#### ComponentLibrary/Component/Icon/AltText

[](#componentlibrarycomponenticonalttext)

Alter the array used when describing icons.

- `@param array $altText` - Array containing key for icon, and value string for descriptions.

```
add_filter('ComponentLibrary/Component/Icon/AltText', function($altText) {
  return $altText;
}, 10, 1 );
```

#### ComponentLibrary/Component/Icon/AltTextUndefined

[](#componentlibrarycomponenticonalttextundefined)

Alter the undefined message used when describing icons.

- `@param string $altTextUndefined` - String containing undefined message for alt text.

```
add_filter('ComponentLibrary/Component/Icon/AltTextUndefined', function($altTextUndefined) {
  return $altTextUndefined;
}, 10, 1 );
```

Add a builtin component
-----------------------

[](#add-a-builtin-component)

The most efficient and proposed way of adding a compning is by a PR to this package. It will then be available for everyone to be used. A internal component requires three different files.

- View (name.blade.php)
- Controller (Name.php)
- Configuration (name.json)

### The view

[](#the-view)

The view sould be as simple as possible, in most cases just a few if-statements. For more advanced solution, please consider to use components as childs to a larger component according to Atomic design principle.

**Example:**

```
{{ $slot or $text }}
```

### The controller

[](#the-controller)

The controller should handle all logic associated with a component. This file soule purpose is to remove any logic from the view.

**Example:**

```
namespace BladeComponentLibrary\Component\Foo;

class Foo extends \BladeComponentLibrary\Component\BaseController
{
    public function init() {
        $this->data['foo'] = "bar";
    }
}
```

### The configuration

[](#the-configuration)

A simple configuration of the slug for the component (used as component name). The default parameters and the view name (defaults to the slug name). The configuration should be written in a valid json format. This file must contain the keys "slug", "default" (default parameters), description and "view".

**Example:**

```
{
    "slug":"foo",
    "default":{
       "foo":true,
    },
    "description":{
       "foo": "Is it foo?",
    },
    "view":"foo.blade.php"
 }
```

###  Health Score

59

—

FairBetter than 98% of packages

Maintenance78

Regular maintenance activity

Popularity34

Limited adoption so far

Community36

Small or concentrated contributor base

Maturity78

Established project with proven stability

 Bus Factor2

2 contributors hold 50%+ of commits

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 ~3 days

Total

520

Last Release

7d ago

Major Versions

1.0.0 → 2.0.02023-09-15

2.0.0 → 3.0.22023-09-28

3.17.5 → 4.0.02024-02-20

4.65.8 → 5.1.02026-03-05

### Community

Maintainers

![](https://www.gravatar.com/avatar/f46fe64973c3e89d15c745c0bf601c25983bafea81d30e64d4bf813a6f8c8c7c?d=identicon)[sebastianthulin](/maintainers/sebastianthulin)

---

Top Contributors

[![NiclasNorin](https://avatars.githubusercontent.com/u/103985736?v=4)](https://github.com/NiclasNorin "NiclasNorin (492 commits)")[![annalinneajohansson82](https://avatars.githubusercontent.com/u/232372534?v=4)](https://github.com/annalinneajohansson82 "annalinneajohansson82 (146 commits)")[![ergr1001](https://avatars.githubusercontent.com/u/97021637?v=4)](https://github.com/ergr1001 "ergr1001 (97 commits)")[![sebastianthulin](https://avatars.githubusercontent.com/u/797129?v=4)](https://github.com/sebastianthulin "sebastianthulin (84 commits)")[![thorbrink](https://avatars.githubusercontent.com/u/1064724?v=4)](https://github.com/thorbrink "thorbrink (63 commits)")[![faejr](https://avatars.githubusercontent.com/u/752642?v=4)](https://github.com/faejr "faejr (46 commits)")[![nRamstedt](https://avatars.githubusercontent.com/u/16800993?v=4)](https://github.com/nRamstedt "nRamstedt (41 commits)")[![malinkytta](https://avatars.githubusercontent.com/u/113056103?v=4)](https://github.com/malinkytta "malinkytta (34 commits)")[![alexanderbomanskoug2](https://avatars.githubusercontent.com/u/39676080?v=4)](https://github.com/alexanderbomanskoug2 "alexanderbomanskoug2 (30 commits)")[![cedrikvonheiroth](https://avatars.githubusercontent.com/u/64852452?v=4)](https://github.com/cedrikvonheiroth "cedrikvonheiroth (24 commits)")[![Muckbuck](https://avatars.githubusercontent.com/u/11438804?v=4)](https://github.com/Muckbuck "Muckbuck (17 commits)")[![michaelclaesson](https://avatars.githubusercontent.com/u/18331514?v=4)](https://github.com/michaelclaesson "michaelclaesson (13 commits)")[![silvergrund](https://avatars.githubusercontent.com/u/4200504?v=4)](https://github.com/silvergrund "silvergrund (7 commits)")[![mikael-stromgren](https://avatars.githubusercontent.com/u/8775561?v=4)](https://github.com/mikael-stromgren "mikael-stromgren (4 commits)")[![mikael102030](https://avatars.githubusercontent.com/u/184387911?v=4)](https://github.com/mikael102030 "mikael102030 (4 commits)")[![petter-a](https://avatars.githubusercontent.com/u/40427478?v=4)](https://github.com/petter-a "petter-a (2 commits)")[![Copilot](https://avatars.githubusercontent.com/in/1143301?v=4)](https://github.com/Copilot "Copilot (2 commits)")[![Sven65](https://avatars.githubusercontent.com/u/10225982?v=4)](https://github.com/Sven65 "Sven65 (2 commits)")[![annaeklov](https://avatars.githubusercontent.com/u/54768095?v=4)](https://github.com/annaeklov "annaeklov (1 commits)")[![viktor7ltz](https://avatars.githubusercontent.com/u/78755786?v=4)](https://github.com/viktor7ltz "viktor7ltz (1 commits)")

---

Tags

getmunicipiomunicipio

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/helsingborg-stad-component-library/health.svg)

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

###  Alternatives

[helsingborg-stad/municipio

A bootstrap theme for creating municipality sites.

4028.5k10](/packages/helsingborg-stad-municipio)

PHPackages © 2026

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