Skip to content
A system for injecting React components into other React components from a central components context
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


npm (scoped) CircleCI

A system for injecting React components into other React components from a central components context.

This package allows your component to have all of its component dependencies injected without the user having to inject them everywhere the component is used.


npm install @reactioncommerce/components-context


If you're using a component library that expects components context, then all you need to do is import ComponentsProvider from this package, wrap your entire React app with it, and pass your components object as the value prop. See appComponents.js and App.js below.

If you're creating a component that uses components from context, your component should expect a prop named components that is a map of component names to the components. This could be a string like "div" for a built-in DOM component, a React component class, or in some cases even a React component instance that your component will clone. Then import the withComponents HOC and wrap your component with it.


import React, { Component } from "react";
import PropTypes from "prop-types";
import { withComponents } from "@reactioncommerce/components-context";

class SaveButton extends Component {
  static propTypes = {
    components: PropTypes.shape({
      Button: PropTypes.oneOfType([PropTypes.string, PropTypes.func])

  render() {
    const { Button } = this.props.components;
    return <Button>Save</Button>;

export default withComponents(SaveButton);


import React, { Component } from "react";
import PropTypes from "prop-types";
import SaveButton from "./SaveButton";

class MyPage extends Component {
  render() {
    return (
        {/* other elements */}

export default MyPage;


import Button from "@reactioncommerce/components/Button/v1";

export default {


import React, { Component } from "react";
import PropTypes from "prop-types";
import { ComponentsProvider } from "@reactioncommerce/components-context";
import appComponents from "./appComponents";
import MyPage from "./MyPage";

class App extends Component {
  render() {
    return (
      <ComponentsProvider value={appComponents}>
        <MyPage />

export default App;

Component-Specific Overrides

If you want all instances of a certain component to receive a component that is different from the rest of your app, you can prefix the key in the components context with that component's name and an underscore.

For example, if you have an AddressForm component that uses the Button component from its components prop, it would normally get that from the Button property of the components context. However, if you want all instances of AddressForm to use a different button component, but the rest of your app to use the normal button component, you would set { AddressForm_Button: OtherButton } in the components context and leave the Button property unchanged.

Commit Messages

To ensure that all contributors follow the correct message convention, each time you commit your message will be validated with the commitlint package, enabled by the husky Git hooks manager.

Examples of commit messages:

Publication to NPM

The @reactioncommerce/components-context package is automatically published by CI when commits are merged or pushed to the master branch. This is done using semantic-release, which also determines version bumps based on conventional Git commit messages.


Copyright 2018 Reaction Commerce

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.