React Component decorator and context provider to expose a channel-event IHub to children components.
yarn add react-channel-event
npn install react-channel-event
First, wrap your app with the <ChannelEventProvider> context element.
<ChannelEventProvider>
<App />
</ChannelEventProvider>Alternatively, you can wrap individial pages/sections with <ChannelEventProvider> to 'jail' events to those pages/sections only. An event will only be sent to components that exist under the same <ChannelEventProvider> context.
import { ChannelEvent, ChannelProps } from "react-channel-event";
import { take, fork } from "channel-event";
@ChannelEvent()
export default class MyComponent extends React.PureComponent<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
count: 0
};
const instance = this;
function* forked(num: number) {
console.log(`fork num: ${num}`);
while (true) {
let data = yield take("test");
console.log(data);
instance.setState(prev => ({
count: prev.count + 1
}))
}
}
this.props.channel.runGenerator(function*() {
let forks = 0;
while (true) {
yield take("test");
forks++;
yield fork(forked, forks);
}
});
}
render() {
return (
<div>
<button onClick={() => this.props.channel.send("test", 22)}>send event</button>
{this.state.count}
</div>
);
}
}
interface Props extends ChannelProps {}
interface State {
count: number
}