Writing components that work with all versions of React.

Just create a “class-factory mixin” to which you can pass any version of React (and make sure you test the component with different versions of React if you’re a library author). For example:

export default
function makeAwesomeComponentClass(ReactComponent) {
return class AwesomeComponent extends ReactComponent {
// define your component using lifecycle methods!
}
}

Then the user of you component can create a component class using any version of React:

import createAwesomeComponentClass from 'awesome-component'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
const AwesomeComponent = createAwesomeComponentClass(React.Component)
ReactDOM.render(<AwesomeComponent />, document.body)

For more info on class-factory mixins (including how to make instanceof work with factory-made classes), see Justin Fagnani’s article on the topic: justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/.

Like what you read? Give Joseph Orbegoso Pea a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.