Product Updates

PubNub EON, Real-time Dashboard Framework in React

1 min readSyed Ahmed on Jun 18, 2018
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

We're pleased to announce our new component library for EON that makes it even easier to start integrating PubNub and real-time charts and dashboards into your React app!

We’re pleased to announce our new component library for EON that makes it even easier to start integrating PubNub with real-time dashboards and charts into your React app! With this library you can do things like:

Currently, we’re providing support for charts, with the goal to add maps down the line. The component library is completely open source, so contributing is encouraged. Head over to the GitHub to add on.

So How Does It Work?

The implementation is actually very simple. We need three main things.

  1. A PubNub Instance which is subscribed and listening to a channel
  2. EON-React Library
  3. Chart component

The library takes care of all the heavy lifting for you to show the chart a component.

If you need example code snippets you can check it out over here.

Let’s Get Coding: A Quick Example

You’ll first have to sign up for a PubNub account to get your unique pub/sub keys.

Then, create a basic skeleton

npx create-react-app Eon-React-Demo

Get the required libraries.

import PubNubReact from 'pubnub-react';
import Chart from 'eon-react';

Initialize our PubNub object.

this.pubnub  =  new PubNubReact({
      subscribeKey:  'demo' // Your sub key
    });
this.pubnub.init(this);

Create our react component.

render() {
    return ( 
      <Chart
        pubnub={this.pubnub}
        channels={['eon-components']} /** Enter your channel name **/
        type='area-line' />
    );
  }

More from PubNub

Can Empathy Exist in the Metaverse
News May 16, 20221 min read

Can Empathy Exist in the Metaverse

A roundtable discussion led by PubNub’s COO, Casey Clegg, exploring the topics of what it means to be human in a virtual world.

PubNub Staff

PubNub Staff

How to Advance Telehealth and Virtual Care Technologies
News May 2, 20221 min read

How to Advance Telehealth and Virtual Care Technologies

Dr. Joe Kvedar, Chair of the Board for the American Telemedicine Association, joins our COO, Casey Clegg, to discuss why...

PubNub Staff

PubNub Staff

Another Step Towards Data Security: ISO-27001 Implementation
BuildMay 2, 20221 min read

Another Step Towards Data Security: ISO-27001 Implementation

Today, we are glad to announce that we are currently in the process of implementing ISO-27001 security standards.

PubNub Staff

PubNub Staff