Skip to content

Instantly share code, notes, and snippets.

@jamesreggio
Last active August 27, 2018 21:43
Show Gist options
  • Save jamesreggio/3127b7fb6f67179f0591b0a6b18dcb5b to your computer and use it in GitHub Desktop.
Save jamesreggio/3127b7fb6f67179f0591b0a6b18dcb5b to your computer and use it in GitHub Desktop.
Example of broken interaction between React.forwardRef and hoist-non-react-statics
// 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 />
{/* ... */
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment