React: CustomEventHandler

This is a React helper to attach event handlers to custom events, especially produced by web components.

Example:

import CustomEventHandler from '@researchnow/reno/dist/react/CustomEventHandler';
import MountedComponent from '@researchnow/reno/dist/react/MountedComponent';

class MyComponent extends MountedComponent {
  // ...

  render () {
    return (
      <CustomEventHandler
        className={this.props.hidden ? 'hidden' : ''}
        onRenoTableItemSelected={e => alert(e.detail.item.id)}
        onRenoTableDataUpdated={e => alert(e.detail.total)}
      >
        <reno-table
          ref={this.setupTable}
          url={config.nickelback.clientSearch}
          fields="name,location,-loc"
          limit="10"
          sort="name"
          filter={this.props.searchText}
        ></reno-table>
      </CustomEventHandler>
    );
  }
}

Attributes

className

It is a standard attribute to set CSS classes.

onXXX

All other attributes should be in the form onTitleCase. That name will be translated into a custom event name title-case — "on" will be removed, the rest is split by capitalized letters into words, each word will be lower-cased, and words will be connected with dashes.

A value of such attribute should be a function suitable to be an event handler.