Example of broken interaction between React.forwardRef and hoist-non-react-statics

react-forwardref-banter-example.js

// Waveform.js

import React, { Component } from 'react';

export default class Waveform extends Component {
  static MIN_AMPLITUDE = 0;
  static MAX_AMPLITUDE = 100;

  render() {
    console.log('Received props:', Object.keys(this.props));
    // ...
  }
}

// CurrentEpisodeWaveform.js

import { connect, compose } from 'react-redux';
import { graphql } from 'react-apollo';
import { withSize } from 'banter/containers';
import Waveform from './Waveform';

// Redux HOC that supplies `episode` prop.
const withCurrentEpisode = connect(/* ... */);

// Apollo GraphQL HOC that supplies `amplitudes` prop.
const withEpisodeAmplitudes = graphql(/* ... */);

// withSize is a hand-rolled HOC that supplies a `size` prop.

export default compose(
  withCurrentEpisode,
  withEpisodeAmplitudes,
  withSize,
)(Waveform);

// App.js

import CurrentEpisodeWaveform from './CurrentEpisodeWaveform';

console.log(
  'Amplitude range: ',
  CurrentEpisodeWaveform.MIN_AMPLITUDE,
  CurrentEpisodeWaveform.MAX_AMPLITUDE,
);

export default () => (
  <CurrentEpisodeWaveform zoomable />
  {/* ... */
);