PHPackages                             sevengroupfrance/sulu-custom-toggle-bundle - 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. sevengroupfrance/sulu-custom-toggle-bundle

ActiveLibrary

sevengroupfrance/sulu-custom-toggle-bundle
==========================================

v1.0.4(3y ago)3957MITJavaScript

Since Dec 10Pushed 3y ago1 watchersCompare

[ Source](https://github.com/sevenGroupFrance/sulu-custom-toggle-bundle)[ Packagist](https://packagist.org/packages/sevengroupfrance/sulu-custom-toggle-bundle)[ RSS](/packages/sevengroupfrance-sulu-custom-toggle-bundle/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (6)DependenciesVersions (10)Used By (0)

sevengroupfrance/sulu-custom-toggle-bundle
==========================================

[](#sevengroupfrancesulu-custom-toggle-bundle)

Inspired by [this pull request](https://github.com/sulu/sulu-demo/pull/66).

What is this bundle's goal?
---------------------------

[](#what-is-this-bundles-goal)

Importing a custom fonctionality into [sulu](https://github.com/sulu/sulu), in this example, a custom content type.
This bundle will import a custom toggle from the [react-switch](https://www.npmjs.com/package/react-switch) npm package.

[![How the custom toggle looks in sulu's admin](assets/images/ct-6.png)](assets/images/ct-6.png)

Installation
------------

[](#installation)

1. Go to your `assets/admin` folder and install the react-switch npm package `npm install react-switch`.
2. Download the [package](https://packagist.org/packages/sevengroupfrance/sulu-custom-toggle-bundle) in your project with the following command line:
    `composer require sevengroupfrance/sulu-custom-toggle-bundle`.
3. In `config/bundles.php` add the following code:
    `SevenGroupFrance\SuluCustomToggleBundle\CustomToggleBundle::class => ['all' => true]`.
4. In `assets/admin/package.json`, add the following line in the "dependencies" object:
    `"sulu-custom-toggle-bundle": "file:node_modules/@sulu/vendor/sevengroupfrance/sulu-custom-toggle-bundle/src/Resources/js"`.
5. In `assets/admin`, `npm install` to initialize the bundle's symlink directory.
6. In `assets/admin/index.js`, add this line:
    `import 'sulu-custom-toggle-bundle'`.
7. In `assets/admin`, `npm run watch` or `npm run build`

For further customisation, please refer to the [official page](https://www.npmjs.com/package/react-switch)

Use in your template files
--------------------------

[](#use-in-your-template-files)

Once installed, to use this new content type, you'll have to create a new property with the type `custom_toggle`.

```

    Text / description

```

Set your togglable fields
-------------------------

[](#set-your-togglable-fields)

You can use this toggle to show/hide elements on your front application just like a normal Sulu toggle, but you can also toggle elements on your back office so your back office doesn't get too messy.

To do so, you'll need to create properties in your xml config file with a `name` that is the `custom_toggle` property's name, underscore `_` and whatever you want:

```

      Text field

```

Be careful to put your properties right after the `custom_toggle` type property.

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity18

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

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

Recently: every ~98 days

Total

9

Last Release

1210d ago

Major Versions

v0.0.4 → v1.0.02021-12-21

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/95850916?v=4)[sevengroupfrance](/maintainers/sevengroupfrance)[@sevenGroupFrance](https://github.com/sevenGroupFrance)

---

Top Contributors

[![tommysonsylverstone](https://avatars.githubusercontent.com/u/47473393?v=4)](https://github.com/tommysonsylverstone "tommysonsylverstone (62 commits)")

---

Tags

sulu-bundle

### Embed Badge

![Health badge](/badges/sevengroupfrance-sulu-custom-toggle-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/sevengroupfrance-sulu-custom-toggle-bundle/health.svg)](https://phpackages.com/packages/sevengroupfrance-sulu-custom-toggle-bundle)
```

PHPackages © 2026

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