PHPackages                             goldnead/statamic-component - 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. goldnead/statamic-component

ActiveLibrary[Utility & Helpers](/categories/utility)

goldnead/statamic-component
===========================

1.0.0(3y ago)266PHP

Since Apr 13Pushed 3y ago1 watchersCompare

[ Source](https://github.com/goldnead/statamic-component)[ Packagist](https://packagist.org/packages/goldnead/statamic-component)[ RSS](/packages/goldnead-statamic-component/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

Statamic Component
==================

[](#statamic-component)

> Statamic-Component is an addon to simplify the creation of separated components in Statamic that combines a bunch of logic like fieldsets & views.

This is for developers who love things DRY. The folder structure in Statamic is usually pretty simple to understand, but as soon a project grows, it can become a bit of a mess. With this addon you are able to group your component files into a single folder.

Features
--------

[](#features)

The aim of this addon was to make statamic projects clearer and more organized. It does this by grouping all the files for a component into a single folder. This makes it easier to find and edit files for a component.

A Component-Folder can include:

- Antlers or Blade Templates
- Stylesheets
- Javascripts
- Fieldsets

Note: Stylesheets and Javascript files are not included by this addon as they are likely part of your own build process.

How to Install
--------------

[](#how-to-install)

You can search for this addon in the `Tools > Addons` section of the Statamic control panel and click **install**, or run the following command from your project root:

```
composer require goldnead/statamic-component
```

How to Use
----------

[](#how-to-use)

### Creating a Component

[](#creating-a-component)

To create a component, simply create a folder in your `resources/components` folder. The name of the folder will be the name of the component.

Inside the folder, you can add any of the following files/folders:

- `views` - This folder can contain any number of Antlers or Blade templates. If you only have one file you might want to name it `_template.antlers.html` or `_template.blade.php`.
- `fieldsets` - This folder can contain any number of fieldsets. Fieldsets are automatically namespaced to the component name. You can find and edit them in the `Fieldsets` section of the control panel, just as you would with regular fieldsets.
- `.php` - This file is the main component file. It must be named the same as the folder in CamelCase.

### Using a Component

[](#using-a-component)

To use a component, you can use the `{{ component }}` tag the same way as you would use the `{{ partial }}` tag. In fact, the `{{ component }}` tag is just an extension of the `{{ partial }}` tag:

```
{{ component:audio-player }} {{# this will use the view located in 'resources/components/AudioPlayer/views/_template.antlers.html' #}}
```

Alternatively, you can use the `{{ component }}` tag with the `src` parameter:

```
{{ component src="audio-player" }}
```

Honeslty, that's all there is to it. You can use the `{{ component }}` tag just like you would use the `{{ partial }}` tag.

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

[](#configuration)

### Config File

[](#config-file)

You can publish the config file by running the following command from your project root:

```
php please vendor:publish --tag=statamic-component
```

This will create a `statamic-component.php` file in your `config/Statamic` folder. The config file contains the following options:

- `components_path` - The path to the components folder. This is relative to the project root. The default is `resources/components`. You'll also have a handy `component_path()` helper function to use in your PHP code.
- `component_namespace` - This is the namespace to your components directory. This is used to autoload your components and is only used when you use a custom component Class to [extend the Component class inside of your component](#component-class). The default is `App\\Components`.

### Fieldset Namespacing and Fieldset-Types

[](#fieldset-namespacing-and-fieldset-types)

#### Namespacing

[](#namespacing)

By default, fieldsets are namespaced to the component name. This means that if you have a component called `audio-player` and a fieldset called `settings`, the fieldset will be namespaced to `audio-player.settings`.

#### Fieldset-Types

[](#fieldset-types)

Fieldset types are a way to use fieldsets danymically like you would inside of a Replicator or Bard set:

```
{{ article }}
  {{ component :src="type" }}
{{ /article }}
```

For example, if you have a component called `Audio` which has a fieldsets called `track` and `playlist` which are both tied to different views, you can use this approach to avoid polluting your templates with the logic of which views to connect to your views. You can configure this inside of your `.php` file:

```