Use Context with Higher Order Components for better testing and reuse.
Use context with Higher Order Components for better testing and reuse.
The logic is simple: put the context
you want as props
.
import contexter from 'react-contexter';
function MyComponent({ fromParent }) {
return <button onClick={ fromParent }>Click Me!</button>;
};
var ContextedComponent = contexter({
fromParent: React.PropTypes.func.isRequired,
}, MyComponent);
And that's it. MyComponent
can be tester with your favorite testing tools, just inject the right prop
and you're ready to go.
just npm install --save react-contexter
as you normally do.
createContexter(contextTypes)
creates a wrapper function for creating context containers:
import { createContexter } from 'react-contexter';
var contexter = createContexter({
fromParent: React.PropTypes.func.isRequired,
});
var ContextedComponentOne = contexter(ComponentOne);
var ContextedComponentTwo = contexter(ComponentTwo);
this can help you creating custom utility functions for your applications. you can expose contexters in their own module for reusing them.
contexter(contextTypes, Component)
creates a contexter that injects contextTypes
and executes it with Component
.
import contexter from 'react-contexter';
function MyComponent({ fromParent }) {
return <button onClick={ fromParent }>Click Me!</button>;
};
var ContextedComponent = contexter({
fromParent: React.PropTypes.func.isRequired,
}, MyComponent);