@bugslifesolutions/components-context
v1.3.3
Published
A system for injecting React components into other React components from a central components context
Downloads
9
Readme
@bugslifesolutions/components-context
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.
Install
npm install @bugslifesolutions/components-context
Usage
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.
SaveButton.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import { withComponents } from "@bugslifesolutions/components-context";
class SaveButton extends Component {
static propTypes = {
components: PropTypes.shape({
Button: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
}).isRequired
};
render() {
const { Button } = this.props.components;
return <Button>Save</Button>;
}
}
export default withComponents(SaveButton);
MyPage.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import SaveButton from "./SaveButton";
class MyPage extends Component {
render() {
return (
<div>
{/* other elements */}
<SaveButton/>
</div>
);
}
}
export default MyPage;
appComponents.js
import Button from "@bugslifesolutions/components/Button/v1";
export default {
Button
};
App.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import { ComponentsProvider } from "@bugslifesolutions/components-context";
import appComponents from "./appComponents";
import MyPage from "./MyPage";
class App extends Component {
render() {
return (
<ComponentsProvider value={appComponents}>
<MyPage />
</ComponentsProvider
);
}
}
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: https://github.com/semantic-release/semantic-release
Publication to NPM
The @bugslifesolutions/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.
License
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
http://www.apache.org/licenses/LICENSE-2.0
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.