dtrucs / react-ctx-connect

A tool to connect component to a React context like react-redux but better

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

Author

Hadrien Lanneau