Skip to content

WC Stories

A Vaadin Flow add-on that displays a group of images like Instagram Stories or WhatsApp status, integrating @gugadev/wc-stories.

Overview

Use the WC Stories add-on to show a sequence of images as auto-advancing, tappable stories in the style of Instagram Stories or WhatsApp status. It wraps the @gugadev/wc-stories web component for Vaadin Flow. You configure the stories from a list of image paths (or richer WCStoriesStory objects) and control sizing, animation duration, corner radius, starting index, and shadow.

Features

  • Displays a group of images as Instagram/WhatsApp-style stories.
  • Simple construction from a List<String> of image paths.
  • Per-story configuration via WCStoriesStory (source image plus an optional placeholder for the loading state).
  • Configurable dimensions (setWidth, setHeight).
  • Configurable animation duration per story (setDuration).
  • Configurable start index (setStartAt) and corner radius (setRadius).
  • Optional drop shadow (setWithShadow).

Supported versions

Add-on version Vaadin version
2.x 23, 24, 25
1.x 14

Refer to the Vaadin Directory page for exact version compatibility.

Installation

From the Vaadin Directory

Available in the Vaadin Directory.

Maven dependency

<dependency>
    <groupId>org.vaadin.addons.flowingcode</groupId>
    <artifactId>wcstories-addon</artifactId>
    <version>X.Y.Z</version>
</dependency>

Replace X.Y.Z with the latest released version. Add the Vaadin add-ons repository to your pom.xml:

<repository>
    <id>vaadin-addons</id>
    <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

For snapshot builds, see maven.flowingcode.com/snapshots.

JavaDoc is published at javadoc.flowingcode.com.

Usage

Create a WCStories from a list of image paths and size it:

WCStories wcstories = new WCStories(
    Arrays.asList("/images/story_1.png", "/images/story_2.png"));
wcstories.setHeight(655);
wcstories.setWidth(370);

Use WCStoriesStory for per-story control (source plus placeholder), and configure the display options:

WCStories wcstories = new WCStories(Collections.emptyList());
wcstories.setStories(Arrays.asList(
    new WCStoriesStory("/images/story_1.png", "/images/placeholder.png"),
    new WCStoriesStory("/images/story_2.png")));
wcstories.setStartAt(0);
wcstories.setDuration(5000);
wcstories.setRadius(8);
wcstories.setWithShadow(true);

Special configuration when using Spring

When running on Spring, allow-list the com.flowingcode package so Vaadin Flow can discover the add-on's components. See Common configuration for details.

API reference

Headline types exposed by the add-on:

  • WCStories — the stories container; extends Component and implements HasComponents (@Tag("wc-stories")). Constructor: WCStories(List<String> storiesPaths). Key methods: setStories(List<WCStoriesStory>), setRadius(Integer), setStartAt(Integer), setDuration(Integer), setHeight(Integer), setWidth(Integer), setWithShadow(Boolean).
  • WCStoriesStory — a single story (@Tag("wc-stories-story")). Constructors: WCStoriesStory(String src), WCStoriesStory(String src, String placeholder). Key methods: setSrc(String), setPlaceholder(String).

For the full API surface, browse the published JavaDoc.

Demo

A live demo is available at addonsv25.flowingcode.com/wcstories. To run the demo locally:

git clone https://github.com/FlowingCode/WCStoriesAddon.git
cd WCStoriesAddon
mvn clean install jetty:run

Then open http://localhost:8080/.

Source code

WCStoriesAddon on GitHub — distributed under Apache License 2.0.