react-announce-collapse

Dispatches custom event COLLAPSE on the component stream.

Purpose

The decorator auto listens to two events on window object via — 'click' and the 'keydown' events. Based on certain conditions (as described below) the COLLAPSE custom-event is fired on the component stream.

• CLICKs outside: false is dispatched as an argument with the COLLAPSE event.
• CLICKs inside: The current state is toggled and then dispatched.

Example

import {Component} from 'React'
import {Subject} from 'rx'
import {asStream} from 'react-announce'
import {collapsable, isActive} from 'react-announce-collapse'
 
const state = new Subject()
 
 
@collapsable
@asStream(state) // observer is required for the decorator to dispatch the COLLAPSE event on it
class Dropdown extends Component {
  render () {
    return (<div>Hello World</div>)
  }
}
 
// isActive() is a utility method that returns the state (Boolean) as an Observable
isActive(state)
  .subscribe(x => console.log(x))
 
/* OUTPUT
  false
  true
  false
*/