React contexter
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.
Install
just npm install --save react-contexter as you normally do.
API
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);
