react-whitelabel/README.md

A React context and components that make run-time white-labeling of a React app easy.

react-whitelabel
============================

`react-whitelabel` is a small library that makes it easy to apply
run-time white-labeling for React projects.

Installation
============================

[`react-whitelabel`](https://www.npmjs.com/package/react-whitelabel)
is availabile in the NPM registry.

    > npm i react-whitelabel

or

    > yarn add react-whitelabel


Example
============================

**app.js**:

    import React from 'react';
    import { WhiteLabelProvider } from 'react-whitelabel';
    import Header from './Header';

    import CarLogo from './imgs/car.png';
    import TruckLogo from './imgs/truck.png';

    const labels = {
        cars: {
            logo: CarLogo
        },
        trucks: {
            logo: TruckLogo
        }
    };

    export default class App extends React.Component {
        render() {
            return (
                <WhiteLabelProvider labels={labels} selectedLabel={'cars'}>
                  <Header />
                </WhiteLabelProvider>
            );
        }
    }

**Header.jsx**:

    import React from "react";
    import { withWhiteLabelContext } from 'react-whitelabel';

    class Header extends React.Component {
        render() {
            return (
                <header className="App-header">
                  <img src={this.props.label.logo} />
                </header>
            );
        }
    }

    export default withWhiteLabelContext(Header);

Which would render the `CarLogo` in `Header.jsx`.

Usage
============================

`react-whitelabel` requires a `WhiteLabelProvider` be specified with
two props: `labels` and `selectedLabel`. `labels` is an object where
each key is a "label". `selectedLabel` is the currently selected white
label. `selectedLabel` must be a key in the `labels` object.

A `WhiteLabelConsumer` or `withWhiteLabelContext` can then be utilized
as descendants of `WhiteLabelProvider`. They provide access to the
properties of the currently selected label.


Contributing, Bug Reports, Feature Requests, General Questions
============================

For any of the above send an email to Thomas Hintz at
<thomas [at] thomashintz.org>.

License
============================

The `react-whitelabel` project is free software: you can redistribute
it and/or modify it under the terms of the GNU General Public License
as published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version OR under the terms of
the MIT license.