Ggtcf

I have a none UI related plugin in vanilla javascript called SignalR.EventAggregatorProxy. Its a server - client pub/sub library.

I already have a Vue plugin and now look at implementing a React plugin. I need some lifetime knowledge of the component. One way is extending React.Component and let the users of the lib use this component instead of the orignal.

class MyEvent

 constructor(message) 
 
 this.message = message;
 


class SignalREventAggregatorComponent extends React.Component 
 subscribe(event, handler, constraint) 
 setTimeout(() => handler(new MyEvent("This comes from backend")), 1000); //signalR.eventAggregator.subscribe(event, handler, this, constraint)
 

 publish(event) 
 //signalR.eventAggregator.publish(event);
 

 componentWillUnmount() 
 //signalR.eventAggregator.unsubscribe(this);
 


class TestComponent extends SignalREventAggregatorComponent 
 componentDidMount() 
 this.subscribe(MyEvent, this.onEvent);
 

 componentWillUnmount() 
 //Doing some teardown in TestComponent 
 super.componentWillUnmount(); // This is paramount to call
 

 onEvent(e) 
 console.log(e);
 

 render() 
 return (
 <div>
 </div>
 );
 

This is a bit fragile, first its not nice to force the users to extend a specific component like this. They might have another third party library they already extend etc. Second its fragile. The user needs to call super.componentWillUnmount otherwise my library will fail to unsubscribe the component and server side events will keep streaming in. (Plus it will be a memory leak). Is there a nicer way?

I need to know when the component dies, plus I must know its context (this keyword basically). Also the component need a nice way of calling methods on the plugin to subscribe and publish events.

Any ideas?

Instead of inheritance, you can create a HOC and use it with your TestComponent!
Check out this example.

You can use some kind of a provider that the user will wrap his root component with, similar to what react-router or redux are doing. And also provide a wrapper component that will do the subscription.

Here's an example:

Root component rendering, your provider adds the subscribe function to the
application context. This is optional, depending on if you want to hold a unique state in your app:

render() 
 <YourProvider>
 <App/>
 </YourProvider>

An example for a component that want's to listen to events:

componentDidMount() 
 this.props.subscribe(MyEvent, this.onEvent);

In order for the component to get the subscribe in the props, the user can wrap his component with your wrapper component like this:

<SubscribeProvider>
 <MyComponent/>
</SubscribeProvider>

or use a withSubscribe function that you also implement.