1. Reference
2. UIKit
3. Feed

Feed component

<wy-feed> | WyFeed

This component renders a feed of posts with an editor and comments as seen on many social networks. The component includes a fully featured post editor with built in support for markdown, code formatting, images, file attachments, cloud attachments, mentions, links, embeds, and polls.

The content of each post is built up from the posted text, images, polls, embeds, links, audio, video, file attachments, and cloud files. Each post can be commented on and reacted to with a set of emoji reactions. Images, audio, video, attached files, and cloud files can be previewed with the built-in previewer supporting 100+ file formats including PDF, Office and Google Drive.

The feed is populated from a single post app or from multiple specified post apps by specifying one or multiple post app identifiers (uid) using the uid attribute. Specifying only one uid allows automatic creation of a corresponding post app on the server the first time it's accessed. When using multiple uid:s, all the specified post apps must exist prior to loading the feed.

To show a combined feed of all post apps available to the user, it's recommended to use the <wy-posts> component, which has additional configuration options, together with a separate <wy-post-editor> component.

When using a single uid, it's also recommended to specify a readable name of the posts app, to get better readable listing and notifications from the app.

It's often useful to base the uid on something that identifies the location where the component is rendered. Typically you would use something like a product id, page id, or path.

The list of posts can be refined to only show posts by other users that the current user follows using the following attribute.

A search field can be enabled for users by adding the search attribute. Searching can also be handled programmatically using the query property, which also reflects the search field in the UI.

Component layout

The component has the editor in the top. Below the editor is the post feed with the optional search field in the top of the list. The editor and the feed can alternatively be used and configured separately by using the <wy-post-editor> component and the <wy-posts> component.

Each post had a header in the top with information about the user together with an avatar. Next comes any attached images or embedded content and then the right formatted text. This is followed by polls and file attachments. In the bottom of the post is reactions and an expandable rich comment section.

The component is block-level with pre-defined CSS styling to adapt to flex- and grid-layouts as well as traditional flow-layouts. It's usually recommended to use a proper flex-layout for the container you are placing the component in for a smooth layout integration.

The height grows with the content per default. Content is automatically loaded during scrolling when the last content becomes visible (aka infinite scrolling). If placed in a flex- or grid-layout or if an explicit height is set, the component becomes scrollable.

The content within the component is per default aligned to the edges of it's own box. It's recommended to add your default padding to the container or to the component to make it fit your design. If you want the component to go all the way to the edges of your container without any outermost roundness or padding, you can set the padding to 0 and set the --wy-border-radius-outer to 0 to make the component align nicely with the edge.

You can add additional styling using CSS Custom Properties and CSS Shadow Parts and further customization using slots.

Importing

If you installed the UIKit with npm you can use the following snippet to import the component into your project. Otherwise, if you installed the UIKit as a <script> you can ignore this section.

import { WyFeed } from "@weavy/uikit-web";

Examples

Creating and showing a single app for posts

Specifying a single app identifier (uid), automatically creates a corresponding app on your Weavy environment when the component is first initialized. It's recommended to specify a readable name of the posts app, to get better readable notifications from the app.

<wy-feed uid="test-posts" name="Test feed"></wy-feed>

Multiple post apps feed with a search field

Specifying multiple app identifiers (uid) separated by space, shows posts from several already created post apps. Here the search field is also enabled for the user.

<wy-feed uid="test-posts test-news" search></wy-feed>

Multiple post apps feed from followed people

A post feed from multiple post apps, displaying only posts made by people the user follows.

<wy-feed uid="test-posts test-news" following></wy-feed>

HTML attributes

Attributes can be set when using the component in HTML. All attributes have corresponding Javascript properties.

Most attributes are optional and/or has sensible default values. Any required attributes are indicated with an asterisk (*).

Learn more about attributes and properties.

JavaScript properties

Properties can be used in JavaScript. Some of them have corresponding HTML attributes where applicable. Any required attributes are indicated with an asterisk (*).

JavaScript methods

Methods for the component are available in JavaScript. Methods that are async return a promise.

DOM Events

The component triggers custom events that bubbles up the DOM tree. They can be listened to using the addEventListener() method.

Learn more about events.

Slots

The slots can be used to inject elements into the component. All predefined child nodes of the slot will be replaced with the injected content.

To prevent child nodes from rendering before the component has loaded you can hide them using CSS.

wy-feed:not(:defined) {
  display: none;
}

Available features

The following features are available for the component. Configure them with a space separated list using the features attribute. Features that are available but disabled by default are indicated by parenthesis (). You can disable any features by prefixing them with negative -.

Learn more about features.