PHPackages                             tollwerk/tw-componentlibrary - 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. tollwerk/tw-componentlibrary

ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility)

tollwerk/tw-componentlibrary
============================

Component library features for your TYPO3 project

v1.2.1(5y ago)67.4k1[1 issues](https://github.com/tollwerk/TYPO3-ext-tw_componentlibrary/issues)[1 PRs](https://github.com/tollwerk/TYPO3-ext-tw_componentlibrary/pulls)GPL-2.0+PHP

Since Dec 16Pushed 5y ago1 watchersCompare

[ Source](https://github.com/tollwerk/TYPO3-ext-tw_componentlibrary)[ Packagist](https://packagist.org/packages/tollwerk/tw-componentlibrary)[ Docs](https://github.com/tollwerk/TYPO3-ext-tw_componentlibrary)[ RSS](/packages/tollwerk-tw-componentlibrary/feed)WikiDiscussions master Synced today

READMEChangelog (10)Dependencies (2)Versions (24)Used By (0)

tw\_componentlibrary
====================

[](#tw_componentlibrary)

> Component library features for your TYPO3 project

About
-----

[](#about)

This TYPO3 extension

1. encourages and supports the development of self-contained, re-usable function and design modules ("**components**") along with your TYPO3 project and
2. exposes these components via a JSON API so that **component or pattern library, testing and styleguide tools** like [Fractal](http://fractal.build) can [extract and render](https://github.com/tollwerk/fractal-typo3) your components individually and independently of your TYPO3 frontend.

Usage
-----

[](#usage)

### Installation

[](#installation)

Install the extension into your [composer mode TYPO3](https://wiki.typo3.org/Composer) installation:

```
cd /path/to/site/root
composer require tollwerk/tw-componentlibrary
```

Alternatively, [download the latest source package](https://github.com/tollwerk/TYPO3-ext-tw_componentlibrary/releases) and extract its contents to `typo3conf/ext/tw_componentlibrary`.

Enable the extension via the TYPO3 extension manager.

### Component types

[](#component-types)

The extension distiguishes 5 main types of components:

- **TypoScript components**: Require a [TypoScript](https://docs.typo3.org/typo3cms/TyposcriptReference/) path with an object definition to render (e.g. `lib.menu`, defined as `HMENU`).
- **Fluid template components**: Require a [Fluid template file](https://github.com/TYPO3/Fluid) (e.g. an Extbase / Fluid partial or standalone Fluid template) and an optional set of rendering parameters / variables.
- **Extbase plugin components**: Require an [Extbase controller](https://docs.typo3.org/typo3cms/ExtbaseGuide/Extbase/Step3Documentation/ActionController.html), a controller action to call and possibly a list of parameters to pass to the controller action.
- **Content components**: Convenient way to render existing TYPO3 content elements as components. Works with both default and custom content elements.
- **Form components**: Hook into the [TYPO3 Form Framework](https://docs.typo3.org/typo3cms/extensions/form/) and treat standard and custom form elements as individual components.

The extension **doesn't impose any requirements towards your TypoScript, Fluid templates or directory layout** except that every component must be individually addressable. That is, you cannot expose e.g. just a part of a rendered Fluid template as a component. In that case, you'd have to outsource the desired part as a partial file of its own.

### Declaring components

[](#declaring-components)

You can declare components either manually (described below) or using the [command line component kickstarter](#command-line-component-kickstarter) .

1. Create and install an empty TYPO3 extension that is going to hold your component definitions. Alternatively, pick an existing extension you've got write access to. It's possible to have multiple of these **component provider extensions**. If you're using and maintaining custom extensions anyway, I recommend using these for providing components on an per-extension basis.
2. Create a `Components` directory inside the provider extension's root directory. In case you're running [TYPO3 in composer mode](https://wiki.typo3.org/Composer), make sure this directory is properly mapped to the `Component` namespace. You might have to add something like this to your main `composer.json` file (replace the vendor name, extension key and paths with appropriate local values): ```
    {
        "autoload": {
            "psr-4": {
                "Vendor\\ExtKey\\Component\\": "web/typo3conf/ext/ext_key/Components/"
            }
        }
    }
    ```
3. Especially if you're going to have a lot of components it's advisable to organise them in a hierarchical structure. Create a suitable directory layout below your `Components` folder to reflect this hierarchy. Use [UpperCamelCase](https://en.wikipedia.org/wiki/Camel_case) directory names without spaces, underscores and special characters — external systems can use the word boundaries for transforming these e.g. into a navigation tree. Your directory layout could look something like this: ```
    ext_key
    `-- Components
        |-- Composite
        |   `-- Form
        `-- Generic
            |-- Form
            `-- Typography
    ```
4. Start creating **component declarations** by creating PHP class files at appropriate locations in your directory layout. Each file must declare exactly **one class** extending one of the **main component type base classes** (see below). The file and class names must be identical, should be in [UpperCamelCase](https://en.wikipedia.org/wiki/Camel_case) and must end with the suffix `…Component` (respectively `…Component.php` for the file name). The part before `…Component` will be used as the component by external tools. In addition to the base version of a component you may provide **variants** of that component by adding an underscore and appendage to the file and class name. System like Fractal can use this for a grouped display of component variants: ```
    ext_key
    `-- Components
        `-- Generic
            `-- Form
                |-- ButtonComponent.php
                |-- Button_IconLeftComponent.php
                |-- Button_IconRightComponent.php
                |-- Button_LinkComponent.php
                |-- Button_LinkIconLeftComponent.php
                `-- Button_LinkIconRightComponent.php
    ```
5. Use the `configure()` method of your component declaration to specify the individual component properties. While each component type brings a small set of specific properties (see below), the majority of instructions is [common to all component types](#common-properties).

#### TypoScript component

[](#typoscript-component)

Use the `setTypoScriptKey()` method to specify the TypoScript object that renders the component output. The key will be evaluated for the page ID specified by the `$page` property (see [common properties](#common-properties)).

```