ViewChannel usage with Frameworks

1. In general

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

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

2. React

When using React you should use the @uiloos/react library. It contains the useViewChannel hook. The useViewChannel hook takes an instance of a ViewChannel, and it will subscribe to changes of that ViewChannel. This way each time a ViewChannelView is presented or dismissed React will automatically re-render the component the useViewChannel is used in.

The easiest way to share a ViewChannel in React is by simply creating an export of an instance of the ViewChannel, and then importing that instance were it is needed.

3. Vue

In Vue you should use the @uiloos/vue library. It contains a composable called useViewChannel. The useViewChannel hook takes an instance of a ViewChannel, and it will subscribe to changes of that ViewChannel. This way each time a ViewChannelView is presented or dismissed Vue will automatically re-render the component the useViewChannel is used in.

The easiest way to share a ViewChannel in Vue is by simply creating an export of an instance of the ViewChannel, and then importing that instance were it is needed.

4. Angular

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

It is recommended to create an @Injectable for each type of ViewChannel that you use. This way each component which needs to use the ViewChannel can inject it via Angulars dependency injection mechanism. This keeps the usage of the ViewChannel close to the Angular way of doing things.

5. Svelte

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

For Svelte you should use the @uiloos/svelte library. It contains the createViewChannelStore function. The createViewChannelStore takes an instance of a ViewChannel, and creates a Svelte readable store from it. This way each time a ViewChannelView is presented or dismissed Svelte will automatically re-render the component the store is used in.

The easiest way to share a ViewChannel in Svelte is to export the store created by createViewChannelStore and to export it and import where needed.

6. Alpine

With Alpine you should use the @uiloos/alpine package. It contains a function called createViewChannelStore which you can register with Alpine.store. This allows you to use the ViewChannel from everywhere in the HTML.