Developer Relations, PubNub
IN THIS ARTICLE

    Subscribe to Our Newsletter

    Stay updated with the latest on web, mobile, and IoT, delivered weekly.
    Thanks for subscribing!

    Thanks for subscribing!

    Get ready for some great content.

    We’re pleased to announce our new component library for EON that makes it even easier to start integrating PubNub and realtime charts and dashboards 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' />
        );
      }

    We have our chart running! If you want to check out the different types of charts you can make, check out the storybook on nxsyed.me.

     

     

    Try PubNub today!

    Build realtime applications that perform reliably and securely, at global scale.
    Try Our APIs
    Try PubNub today!

    Footer Html for Blog Page