DateGallery usage with Frameworks

1. In general

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

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

2. React

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

3. Vue

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

When you spread your use of the DateGallery across multiple components, you might have to tell Vue that the DateGallery has changed, so Vue picks up on the changes.

In the examples a tracker prop is added to each component that also has the DateGallery as a prop. The tracker is a number that increments when the DateGallery changes. This tickles Vue into re-rendering the component.

The technical reason for this: Vue has an API called shallowRef which you can combine with triggerRef to create a ref that a library author (such as uiloos) can then use to store state outside of Vue. Unfortunately for us here at uiloos, triggerRef only works one level deep.

4. Angular

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

When passing around the DateGallery to sub components via @Input , Angular will not re-render the sub-components when the DateGallery changes.

The solution used in the example is to also subscribe to the DateGallery in the sub-components for the specific events that they are interested in, using the createDateGallerySubscriber subscriber creator function.

5. Svelte

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

6. Alpine

With Alpine we feel that it is best to fallback to vanilla js. The reason for this is the level of JavaScript and HTML required to create truly reusable components in Alpine is not worth the effort.

We feel Alpine works best when you have HTML that you want to enrich. The HTML should to be in the drivers seat. In the case of a datepicker or calendar you want JavaScript to be in the drivers seat.

We advise checking out the vanilla examples that use web components.