Skip to content

v5.0.0 - State now available to decorated class methods

Compare
Choose a tag to compare
@tizmagik tizmagik released this 26 Sep 15:05
· 111 commits to main since this release

New Feature (Breaking Change)

Thanks to @mennenia in #45 πŸŽ‰

The signature of decorated class methods changes from:

(props, args) => { }

to:

(props, state, args) => { }

This is so that you can access Class runtime state information within the decorator, like so:

// Reminder, to decorate class methods, you need to decorate the class itself
@track()
export default class FooButton extends React.Component {

  // In this case the tracking data depends on
  // some unknown (until runtime) value (state and event)
  @track((props, state, [event]) => ({
    action: 'click',
    inModal: state.isModalShowing,
    label: event.currentTarget.title || event.currentTarget.textContent
  }))
  handleClick = (event) => {
    if (this.props.onClick) {
      this.props.onClick(event);
    }
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.props.children}
      </button>
    );
  }
}

NOTE: This was technically possible in previous versions, but required you to use the imperative this.props.tracking.trackEvent() API so that you had access to Class state, this.state. Now it's possible to keep the tracking logic declaratively in the decorator thanks to @mennenia ! πŸ’ͺ