Run-time white-labeling for React projects.
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
Go to file
Thomas Hintz 0f2ec02ae1 Finishing update of dependencies. 4 years ago
dist Finishing update of dependencies. 4 years ago
.gitignore Initial commit. 5 years ago
LICENSE Initial commit. 5 years ago
README.md Removing language specifiers from README.md source blocks. 5 years ago
index.js Initial commit. 5 years ago
package-lock.json Finishing update of dependencies. 4 years ago
package.json Finishing update of dependencies. 4 years ago
webpack.common.js Initial commit. 5 years ago
webpack.dev.js Initial commit. 5 years ago
webpack.prod.js Initial commit. 5 years ago

README.md

react-whitelabel

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

Installation

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.