Skip to content

Instantly share code, notes, and snippets.

@trueadm
Last active July 25, 2019 10:15
Show Gist options
  • Save trueadm/de2c2fc53771df72829be5a41384ab18 to your computer and use it in GitHub Desktop.
Save trueadm/de2c2fc53771df72829be5a41384ab18 to your computer and use it in GitHub Desktop.

React Flare

Target vs Root events

With Flare, you can build responders to intercept DOM events. There are two types of ways of doing this:

  • capturing target events
  • capturing root events

Target events occur on a child in a sub-tree:

<div>
  <div responders={<PressResponder />}
    <button1>I am a target because I am in the responder sub-tree</button1>
  </div>
  <button2>I am not a target, so you need root events to capture me</button2>
</div>

Root events occur anywhere on the page. You can conditionally listen to root events based off something occuring as a target event:

const PressResponder = {
  targetEventTypes: ['mousedown'],

  onEvent(event, context) {
    if (event.type === 'mousedown') {
    	context.addRootEventTypes(['mouseup']);
    }
  }

  onRootEvent(event, context) {
    if (event.type === 'mouseup') {
      context.removeRootEventTypes(['mouseup']);
    }
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment