@teamtv/eventstream-client-react

React component for easy use of the teamtv eventstream-client

Usage no npm install needed!

<script type="module">
  import teamtvEventstreamClientReact from 'https://cdn.skypack.dev/@teamtv/eventstream-client-react';
</script>

README

EventStream Client React Component

Simple React component for the teamtv event stream API

Installation

npm install --save @teamtv/eventstream-client-react

Usage

import React from 'react';
import ReactDOM from 'react-dom';

import { StatsProvider, StatsConsumer } from '@teamtv/eventstream-client-react';

const ScoreWidget = ({match, score}) => {
  return (
    <StatsConsumer types={["score"]}>
      {({match, score}) => {
        if (!match) {
          return <div>loading...</div>;
        }
        return (
          <div>
            <div>{match.homeTeam.name} - {match.awayTeam.name}</div>
            <div>{score.home} - {score.away}</div>
          </div>
        )
      }
      }
    </StatsConsumer>
  );
};

ReactDOM.render(
  <StatsProvider endpointUrl="<teamtv eventstream endpoint>">
    <ScoreWidget />
  </StatsProvider>,
  document.getElementById("app")
);