README
react-event-manager
Event bus meet react.
installation
npm install -S @jswork/react-event-manager
properties
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | false | - | The extended className for component. |
value | any | false | - | The app instance. |
inject | func | false | noop | The injector for you application. |
usage
- import css
@import "~@jswork/react-event-manager/dist/style.css";
// or use sass
@import "~@jswork/react-event-manager/dist/style.scss";
// customize your styles:
$react-event-manager-options: ()
- import js
/*1. app.js register the event-manager(eventBus) for SPA `app instance` */
import ReactEventManager from '@jswork/react-event-manager';
import ReactDOM from 'react-dom';
import React from 'react';
import Button from './components/button';
import Panel from './components/panel';
import EventMitt from '@jswork/event-mitt';
import './assets/style.scss';
class App extends React.Component {
constructor(props) {
super(props);
Object.assign(this, EventMitt);
}
render() {
return (
<ReactEventManager value={this}>
<div className="app-container">
<Panel />
<Button>I AM a button</Button>
</div>
</ReactEventManager>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
/*2. publish: panel.js emit the event: ok/cancel */
import React from 'react';
import { event } from '@jswork/react-event-manager';
@event
export default class extends React.Component {
componentDidMount() {
setTimeout(() => {
const { $app } = this.props;
$app.emit('panel:ok', {
data: [1, 2, 3]
});
}, 2000);
}
render() {
return (
<div className="panel">
<h1>Panel title</h1>
<p>I am a panel</p>
<button
onClick={(e) => {
this.props.$app.emit('panel:cancel');
}}>
Panel will cancel action
</button>
</div>
);
}
}
/*3. subscribe: button.js subscribe panel event */
import React from 'react';
import { event } from '@jswork/react-event-manager';
@event
export default class extends React.Component {
static events = {
'panel:ok': 'onOk',
'panel:cancel': 'onCancel'
};
constructor(inProps) {
super(inProps);
console.log('ctor');
this.state = { items: [] };
}
onOk(e) {
console.log('onOk!', e);
this.setState({ items: e });
}
onCancel() {
console.log('onCancel!');
}
render() {
console.log(this.props);
return (
<button
className="button"
onClick={(e) => {
console.log(e);
}}>
{this.props.children}
{JSON.stringify(this.state.items)}
</button>
);
}
}
documentation
license
Code released under the MIT license.