Connect/provide context to/from the stateless component
import { createProvider, connectContext } from 'connect-context';
const Provider = createProvider({
Layout: ({ children }) => (
<div class="your-awesome-layout">
{children}
</div>
),
});
const contextTypes = {
Layout: PropTypes.func.isRequired,
};
connectContext(contextTypes)
(({ Layout }) => (<Layout>
Hello, React!
</Layout>));
// <div class="your-awesome-layout">Hello, React</div>
Prepare context connector, which can be applied on an existing component.
Params:
contextProps
{object|function} Context object or getChildContext function;- If is a function, accepts
props
,state
parameters.
- If is a function, accepts
contextTypes
{object} Context types (in case of contextProps is a function)
Returns: {function} connector
Create React component, which provides specified context.
Params:
contextProps
{object|function} Context itselfs or getChildContext function;- If is a function, accepts
props
,state
parameters.
- If is a function, accepts
contextTypes
{object} Context types (in case of contextProps is a function)
Returns: {function} Component
Connect context (specified in contextTypes) to the component.
Params:
contextTypes
{object} Context typesmapContextToProps(context, props)
{function} Map context to the props (by the defaults maps the entire context to the props)
Returns: {function} connector
Decorator for react-redux connect, which provides you with a possibility to map context to props and state to props in the same function.
Params:
contextTypes
{object} Context typesmapAllToProps(context, state, props)
{function} Map context, state, and own props
Returns: {function} connector
* Function connect
requires react-redux
as optional dependence. It means that if your build envelopment has no react-redux, connect function will be unreachable.
Vladimir Kalmykov vladimirmorulus@gmail.com
MIT, 2017