connect-context

connect-context

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>

Docs

provideContext(contextProps, [contextTypes]) : connector

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.
• contextTypes {object} Context types (in case of contextProps is a function)

Returns: {function} connector

createProvider(contextProps, [contextTypes]) : Component

Create React component, which provides specified context.

Params:

• contextProps {object|function} Context itselfs or getChildContext function;
  • If is a function, accepts props, state parameters.
• contextTypes {object} Context types (in case of contextProps is a function)

Returns: {function} Component

connectContext(contextTypes, mapContextToProps): connector

Connect context (specified in contextTypes) to the component.

Params:

• contextTypes {object} Context types
• mapContextToProps(context, state, props) {function} Map context to the props (by the defaults maps the entire context to the props)

Returns: {function} connector

connect(contextTypes, mapAllToProps): 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 types
• mapAllToProps(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.

Author

Vladimir Kalmykov [e-mail]

License

MIT, 2017