react-ctx-connect
This tool helps you to connect your React component to a React context. It will let you set props you want to get from your context and inject to your component and avoid useless re-renders.
Install
$ npm i react-ctx-connect
Usage
context.js
import React from 'react';
import connect from 'react-ctx-connect';
export const context = React.createContext({ foo: 'Hello World' });
export const connectContext = connect(context);
Component/Component.js
import React from 'react';
export default ({ foo }) => <p>{foo}</p>
Component/index.js
import { connectContext } from './context.js';
import Component from './Component';
export default connectContext('foo')(Component);
Advanced Usage
There is three ways to access context values :
List of strings
You can pass a list of props names as strings for an exact match between context values and component props.
connectContext('foo', 'bar')(Component);
Component
will have foo
and bar
props with context.foo
and context.bar
values.
Mapping
You can specify an object of key/values to rename your props.
connectContext({
foo: 'someValue',
bar: 'someOtherValue',
})(Component);
Component
will have foo
prop with context.someValue
value and bar
prop
with context.someOtherValue
value.
You can also specify a path if you want to access a deep value in your context.
connectContext({
foo: 'some.value',
})(Component);
Function
Finally, you can create a function to access the current context value and return you own object of props.
connectContext(context => ({
foo: context.some.value,
}))(Component);
connectContext(({ some: { value: foo }}) => ({ foo }))(Component);
In theses two examples, Component
will have a foo
prop with
context.some.value
value.
Tests
$ npm test