ActiveList usage with Frameworks

1. In general

The ActiveList component works well with any framework which supports reactivity.

For example in both Angular and Vue you can use instances of the ActiveList as is, both frameworks understand when you manipulate the ActiveList, that it will need to re-render component.

When using frameworks you will not need to subscribe to changes and observe the ActiveList manually. This allows you to use the ActiveList more declaratively. Using the ActiveList declaratively results in easier to understand code.

2. React

When using React you should use the @uiloos/react library. It contains the useActiveList hook which provides you an ActiveList, without the need to subscribe to it.

3. Vue

In Vue you should use the @uiloos/vue library. It contains the useActiveList composable which provides you an ActiveList, without the need to subscribe to it.

4. Angular

If you are using Angular there is no need to include an extra library. As long as you use ActiveList inside of a @Component it will pick up on changes automatically.

5. Svelte

For Svelte you should use the @uiloos/svelte library. It contains the createActiveListStore function which creates a readable ActiveList store, so you do not need to subscribe to it manually.

6. Alpine

With Alpine you should use the @uiloos/alpine package. It contains a function called activeList which you can register with Alpine.data. This allows you to instantiate an ActiveList from within HTML.

Alternatively you can instantiate the ActiveList in JavaScript / TypeScript, and pas the instance to the subscribe function. The result of the subscribe function can be passed to Alpine.data.

Examples
See the ActiveList in action with easy to copy examples