Skip to content

bcerati/react-mercure

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Boris CERATI
Oct 27, 2019
0f9af9d · Oct 27, 2019

History

2 Commits
Oct 27, 2019
Oct 27, 2019
Oct 27, 2019
Oct 27, 2019
Oct 27, 2019
Oct 27, 2019
Oct 27, 2019
Oct 27, 2019
Oct 27, 2019
Oct 27, 2019

Repository files navigation

react-mercure

This React library gives you the possibility to integrate Mercure in your React applications. To do that you have two possibilities : integrate it either with an HOF given by this library or with a common component also given by this library.

MercureSubscriber component

You can use the given MercureSubscriber component by doing the following :

function App() {
  const [data, setData] = React.useState({ name: 'Boris' });

  return (
    <div>
      <MercureSubscriber
        hub="http://localhost/hub"
        topics={['http://localhost/user']}
        update={setData}
        json
      >
        <h1>Hello {data.name}</h1>
      </MercureSubscriber>
    </div>
  );
}

export default App;

The MercureSubscriber React Component require these props :

  • hub: a string representing the URL of the Mercure hub ;
  • topics: an array of string reprensenting the topics we want to subscribe ;
  • update: a callback executed when a new message is pushed on the hub in the given topics.

Some additionnals props can be passed :

  • json: a boolean. If set as true, the data will be parse with the JSON.parse function before passing them the the callback ;
  • children: can be other components passed as childrend.

With the HOF

TODO : this part of the doc needs to be written!

import React from 'react';
import { withMercure } from '@cerati/react-mercure';

function App({ mercureData }) {
  return (
    <React.Fragment>
      <h1>Hello {mercureData.name}</h1>
    </React.Fragment>
  );
}

const config = {
  hub: 'http://localhost/hub',
  topics: ['http://localhost/user'],
  json: true,
};

export default withMercure(config, {
  name: 'Boris',
})(App);

About

Mercure subscription using React

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published