Example use of EventMixin

example.coffee

Button = react.createClass
  displayName: 'Button'

  mixins: [EventMixin]

  handleClick: ->
    @emit 'click'
    @bubble 'dropdown.open', x: 10, y: 20 # Bubble the event up the component chain

  render: ->
    dom.div className: 'Button', onClick: @handleClick

Frame = react.createClass
  displayName: 'Frame'

  mixins: [EventMixin]

  componentDidMount: ->
    # Communication between component to owner 
    @refs.button.on 'click', -> 
      console.log 'button clicked'

  render: ->
    dom.div className: 'Frame', [
      Button ref: 'button'
    ]

App = react.createClass
  displayName: 'App'

  mixins: [EventMixin]

  componentDidMount: ->
    # Communication between distant components
    @on 'dropdown.open', (e) -> 
      console.log "open dropdown at pos #{e.args[0].x},#{e.args[0].y}"
      e.stopPropagation() # Stops propagation of the event.

  render: ->
    dom.div className: 'App', [
      Frame()
    ]