Nanoseconds Produce Minutes


    3.0.0 • Public • Published


    Build Status npm Coverage Status

    A declarative approach to writing react components. Enables reuse of component behaviors.


    npm i react-announce --save



    @asStream() decorator lets any observer subscribe to the lifecycle events (and also custom events that we will see later) of the component.

    const Rx = require('rx')
    const observerA = Rx.Observer.create(x => console.log('A', x))
    const observerB = Rx.Observer.create(x => console.log('B', x))
    @asStream(observerA, observerB)
    class MyComponent extends Component {
      render () {
        return (<div>Hello World!</div>)
    A {event: 'WILL_MOUNT', args: [], component: MyComponent {}}
    B {event: 'WILL_MOUNT', args: [], component: MyComponent {}}
    A {event: 'DID_MOUNT', args: [], component: MyComponent {}}
    B {event: 'DID_MOUNT', args: [], component: MyComponent {}}

    Every subscriber gets all the notification from all the instances of the MyComponent class, of each of its lifecycle and custom events. Each notification on the stream is fired with three keys —

     "args": [], /*the arguments with which the event was dispatched*/,
     "component": {} /*instance of the component*/

    Too improve performance, the subscriptions are only created once the component mounts and are automatically removed (disposed) as soon as it unmounts.

    getInstanceStream(stream: Observable, dispose: function)

    Exposes the component events of only the CURRENT instance, as a stream and is always called with context of that instance. It is called as soon as the component is mounted.

    class MyComponent extends Component {
      getInstanceStream (stream, dispose) {
        //{stream} exposes events of only the current instance of the component.
        dispose(stream.subscribe(x => console.log(x)))
      render () {
        return (<div>Hello World!</div>)

    The second param is dispose which disposes the subscription as soon as the component unmounts. This frees up the allocated memory and improves performance.

    dispatch(string: event, ...args)

    The component gets a special function named dispatch() which enables us to dispatch custom events. This is a very powerful feature, as it removes the need of passing loads of callbacks to the deepest level of components. For example —

    const bus = new Rx.Subject()
    class MyComponent extends Component {
      onClick (e) {
        * The first param is used as the name of the event
        * Rest of the params are passed as the `args` property to the component stream.
        this.dispatch('CLICKED', e)
      render () {
        return (<div onClick={this.onClick.bind(this)}>Hello World!</div>)
    bus.subscribe(x => console.log(x))

    Here the bus object can be accessed globally for any kind of internal event that is fired. There is no need of passing a callback to this component for the onClick event, instead I can directly subscribe to the bus.

    IMPORTANT This functionality can soon become a problem if all the component's start exposing streams. Use this feature ONLY if a component has a lot of interactions built into it. For example — A form component which has multiple text boxes and dropdowns.


    You can create multiple extensions which are based on this module using the createDeclarative method. The method essentially helps you define a custom getInstanceStream method without the verbosity.

    For instance if I want to create a timer declarative, that sets the time elapsed since component was mounted to the state of that particular component, then I do as follows —

    const timer = createDeclarative(function (stream, dispose, interval, stateProperty) {
      const time = Observable.interval(interval).map(
        stream.filter(x => x.event === 'WILL_MOUNT')
        .map(() =>
        .combineLatest(time, (t1, t2) => t2 - t1)
        .subscribe(x => this.setState({[stateProperty]: x}))
    @timer(100, 'elapsedTime')
    class MyComponent extends Component {
      render () {
        return (<div>Time Elapsed: {this.state.elapsedTime}ms</div>)
    // Keeps printing the elapsed time which gets updated ever 100ms

    createDeclarative uses @asStream declarative and sets its getInstanceStream method to your custom method.

    Lifecycle Events


    Release Channels

    There are two release channels — @stable & @latest

    npm i react-announce@stable --save
    npm i react-announce@latest --save

    Available Declaratives npm


    npm i react-announce

    DownloadsWeekly Downloads






    Last publish


    • tusharmathur