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


react-whitelabel is availabile in the NPM registry.

> npm i react-whitelabel


> yarn add react-whitelabel



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 />


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} />

export default withWhiteLabelContext(Header);

Which would render the CarLogo in Header.jsx.


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 .


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.