Did you know? All Video & Audio API plans include a $100 free usage credit each month so you can build and test risk-free. View Plans ->

React Activity Feed Components

In this tutorial, we’re going to build an app using React and Stream’s react-activity-feed, a library full of components for building activity feeds. At the end of this tutorial you’ll have:

  • A fully functional timeline feed with likes and comments
  • A notification feed with real-time push
  • A status update form with support for emojis, images, links, mentions, and other rich content

You also won’t need to run any server-side code; everything will run within the React application, making it very easy to build both traditional and social applications using a serverless approach. More information and resources on how you can use Stream APIs are available at the end of the tutorial.

example of react feeds sdk

Setup

In order to run the code from this tutorial on your laptop, you need to have Node 8 (or higher) and Yarn installed.

Run the following commands to create a new react app:

bash
1
2
3
4
npx create-react-app react-feeds-example cd react-feeds-example npm install react-activity-feed npm start

You can also skip the setup and follow the tutorial without coding, you can see every step in action on CodePen; we have already set up an app for you and prefilled all the code examples with your credentials.

User Token

With a live application, you generate tokens server-side or with serverless functions. You don't have to do so to follow this tutorial, but the following is what the generated token might look like:

javascript
1
2
let client = stream.connect('YOUR_API_KEY', 'YOUR_API_SECRET'); let userToken = client.createUserToken('USER_ID');

This is how you would generate the token server side (no need to do this for this tutorial):

JS/Node
Python
Ruby
PHP
js
1
2
3
4
5
6
// npm install getstream --save let stream = require('getstream'); let client = stream.connect('YOUR_API_KEY', 'YOUR_API_SECRET'); let userToken = client.createUserToken('USER_ID');

Add Stream to your application

For the purposes of this tutorial, we’ve prepared an app with some sample data. The StreamApp React component connects to Stream with the API key, App ID and user token. The code below connects your app to Stream. Everything you add within has access to Stream.

Open up src/App.js and replace its contents with the following code:

react-activity-feed (jsx)
1
2
3
4
5
6
7
8
9
10
11
import React from 'react'; import { StreamApp } from 'react-activity-feed'; import 'react-activity-feed/dist/index.css'; class App extends React.Component { render() { return <StreamApp apiKey='YOUR_API_KEY' appId='APP_ID' token='USER_TOKEN'></StreamApp>; } } export default App;

Notification Feed

To get started, we’ll add a notification feed to our app. In this example we’ll build a notification feed that’s similar to sites like Linkedin, Facebook etc. The notification feed will show which notifications are unseen/unread and update in real time.

The next piece of code adds a NotificationDropdown to our app:

react-activity-feed (jsx)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react'; import { StreamApp, NotificationDropdown } from 'react-activity-feed'; import 'react-activity-feed/dist/index.css'; class App extends React.Component { render() { return ( <StreamApp apiKey='YOUR_API_KEY' appId='APP_ID' token='USER_TOKEN'> <NotificationDropdown notify /> </StreamApp> ); } } export default App;

We’ve now added a notification feed to the page.

Real-time

We made it super simple to notify your users when new updates are added to a feed. Just add the notify prop to either the FlatFeed, NotificationFeed or the above NotificationDropdown. This is all you need to do to connect your app to Stream’s Real-time API. We've gone ahead and added the notify prop to all examples in this tutorial.

Timeline Feed

Now that we have a simple notification feed in place lets see how easy it is to add an news feed/activity feed. The FlatFeed component displays your activities in a simple default styling, but you can customize this or build your own custom activity component and include it in the Activity prop.

Replace the code in src/App.js with the following example:

react-activity-feed (jsx)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react'; import { StreamApp, NotificationDropdown, FlatFeed } from 'react-activity-feed'; import 'react-activity-feed/dist/index.css'; class App extends React.Component { render() { return ( <StreamApp apiKey='YOUR_API_KEY' appId='APP_ID' token='USER_TOKEN'> <NotificationDropdown notify /> <FlatFeed notify /> </StreamApp> ); } } export default App;

We’ve now added a notification feed to the page. It may not seem like much, but try clicking the following button and see what happens.

The functionality that comes from using our React Components in conjunction with a Stream-powered FlatFeed is a great way to get started with building an application, as it offers ways of displaying several application-centric features, such as a gallery view, a card view for websites, and a third view for audio and video files, just to name a few.

Note: the FlatFeed component doesn't have infinite scrolling activated by default, but it does support it. You can turn it on by including our InfiniteScrollPaginator in the Paginator prop.

Custom Activity

In this next example you’ll learn how to customize the activity component. You can specify your own activity component using the Activity prop. The example below adds a like button to each Activity element.

react-activity-feed (jsx)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React from 'react'; import { StreamApp, NotificationDropdown, FlatFeed, Activity, LikeButton } from 'react-activity-feed'; import 'react-activity-feed/dist/index.css'; class App extends React.Component { render() { return ( <StreamApp apiKey='YOUR_API_KEY' appId='APP_ID' token='USER_TOKEN'> <NotificationDropdown notify /> <FlatFeed notify Activity={(props) => ( <Activity {...props} Footer={() => ( <div style={{ padding: '8px 16px' }}> <LikeButton {...props} /> </div> )} /> )} /> </StreamApp> ); } } export default App;

Note: you can create a (toggle) button for other types of reactions such as reposts or comments using either the ReactionIcon or the ReactionToggleIcon. These two components come preloaded with several functions to make functional reactions a breeze.

Comments

You can easily add comments to your app by adding a CommentList to the activity we started customizing. Just pass it the activityId as a prop to display all of that activity’s comments. We can do all of this in the same way as when we added the LikeButton to our activity. The other thing we need to do is tell the FlatFeed to also get the recent reactions to activities. {{ reactions: { recent:true }}.

The CommentField allows users to post a comment. Have a look at the example below.:

react-activity-feed (jsx)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React from 'react'; import { StreamApp, NotificationDropdown, FlatFeed, LikeButton, Activity, CommentField, CommentList } from 'react-activity-feed'; import 'react-activity-feed/dist/index.css'; class App extends React.Component { render() { return ( <StreamApp apiKey='YOUR_API_KEY' appId='APP_ID' token='USER_TOKEN'> <NotificationDropdown notify /> <FlatFeed options={{ reactions: { recent: true } }} notify Activity={(props) => ( <Activity {...props} Footer={() => ( <div style={{ padding: '8px 16px' }}> <LikeButton {...props} /> <CommentField activity={props.activity} onAddReaction={props.onAddReaction} /> <CommentList activityId={props.activity.id} /> </div> )} /> )} /> </StreamApp> ); } } export default App;

Note: You can create your own custom component for displaying lists of other types of reactions using the ReactionList component.

Status Updates

Last, but not least, we're adding a way for our users to add data to a feed.

Again, you can, of course, write your own component to post new activities. However, we, at Stream, have designed a StatusUpdateForm that does it all: emoji selection, file and image uploads, and open-graph scraping for video, audio and, of course, normal web pages. So, plenty of stuff to get started with :)

Try pasting one of the following links: https://goo.gl/Hok8hp or https://youtu.be/WKfiio7lOH0.

And we do all of this with just one extra line of code:

react-activity-feed (jsx)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React from 'react'; import { StreamApp, NotificationDropdown, FlatFeed, LikeButton, Activity, CommentList, CommentField, StatusUpdateForm, } from 'react-activity-feed'; import 'react-activity-feed/dist/index.css'; class App extends React.Component { render() { return ( <StreamApp apiKey='YOUR_API_KEY' appId='APP_ID' token='USER_TOKEN'> <NotificationDropdown notify /> <StatusUpdateForm /> <FlatFeed options={{ reactions: { recent: true } }} notify Activity={(props) => ( <Activity {...props} Footer={() => ( <div style={{ padding: '8px 16px' }}> <LikeButton {...props} /> <CommentField activity={props.activity} onAddReaction={props.onAddReaction} /> <CommentList activityId={props.activity.id} /> </div> )} /> )} /> </StreamApp> ); } } export default App;

Please note that this tutorial uses anonymous functions (in Activity.Footer and alike) to portray the possibility of using components to access render properties. Refrain from using anonymous function in your production code to reduce the amount of unnecessary re-renders. If you don’t need to access render properties at all, use plain JSX element possibly wrapped in React.Fragment.

Server-Side Integration

So far, we’ve looked at how you can read and post activities using React. In most cases, you will also need to perform server-side interactions, such as creating follow relationships, adding activities or changing user-data. All of the functionality we looked at in this tutorial is exposed via Stream's REST API and can be used server-side.

This is how we can add an activity from server-side:

JS/Node
Python
Ruby
PHP
Java
Go
C#
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// npm install getstream --save // let stream = require('getstream'); let client = stream.connect('YOUR_API_KEY', 'YOUR_API_SECRET'); let feed = client.feed('timeline', 'USER_ID'); feed.addActivity({ actor: client.user('USER_ID').ref(), verb: 'post', object: 'I love this picture', attachments: { og: { title: 'Crozzon di Brenta photo by Lorenzo Spoleti', description: 'Download this photo in Italy by Lorenzo Spoleti', url: 'https://unsplash.com/photos/yxKHOTkAins', images: [ { image: 'https://goo.gl/7dePYs' } ] } } });

Concluding the React Activity Feed Tutorial

In the last few minutes you’ve build a fully functional activity feed and notification feed. It includes listening to changes in real time, rich link previews using open graph scraping, file uploads, likes and comments.

All of the components are customizable. The example showed a social feed, but you can also use this to show activity related to your sales leads, notification about your business processes or you’re friends going for a run.

Stream’s API is used by over half a billion end users. The API tutorial and the docs help you take a deep dive and learn how to fully customize your activity feed’s behaviour.

Final Thoughts

In this tutorial we saw how easy it is to use Stream API and the React library to add a fully featured timeline to an application.

Adding feeds to an app can take weeks or months, even if you're a React developer. Stream makes it easy and gives you the tools and the resources to improve user engagement within your app. Time to add a feed!

Give us feedback!

Did you find this tutorial helpful in getting you up and running with your project? Either good or bad, we're looking for your honest feedback so we can improve.

Start coding

If you're interested in a custom plan or have any questions, please contact us.