Stream React Components

2018, August 7th

Check out the source code over at GitHub.

Stream React Components are a set of React components that help you integrate with Stream. It includes a baseline <Feed /> component that you can drop in any React app (with your Stream application tokens + keys) to instantly retrieve a feed client-side.

stream-react-components was one of my last projects at Stream, but it's also one of the most important ones — integrating with Stream is a pretty complex task, and providing a bunch of frontend components makes the process much easier. (I left Stream a little ways into this project, so it's still pretty limited on features.)

Here's the quickstart code:

import React from 'react';
import ReactDOM from 'react-dom';
import StreamReactComponents from 'stream-react-components';

let {Feed} = StreamReactComponents(yourStreamAppKey, yourStreamAppID);

ReactDOM.render(
    <Feed feedToken={someFeedTokenYouGotAsynchronously} feedSlug={"profile"} feedID={1234}/>,
    document.getElementById('app')
);

Features

stream-react-components was made to handle a bunch of different Stream features. Per the library README.md:

One of the key things that I had to design for early on was being able to use these components with a minimum amount of configuration out of the box, but also allow for complete customization. There's basically three levels of customization available:

Oh, it was also able to handle "flat" feeds and "aggregated" feeds pretty much interchangeably, which both have different data models :)

Tech deets

stream-react-components is written in ES6 and React, built with Webpack, and tested with Jest, and deployed to NPM. Docs are hosted on GitBook, and you can find all the source code on GitHub.

If you're ever building your own React component library, there's one little thing that you have to include as part of your webpack config, just to make sure that the bundle is interpreted the right way:

output: {
        filename: "your-component-library.js",
        libraryTarget: "umd"
    }

If you're interested in some quick frontend react components for your Stream integration, go check them out!