From 126eadb3c64e42b4f3183bd0a4758794db763a48 Mon Sep 17 00:00:00 2001 From: Thomas Hintz Date: Sat, 18 Nov 2023 09:32:07 -0800 Subject: [PATCH] Updating whitelabel links. --- src/app/(main)/articles/whitelabeling-with-react/page.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/(main)/articles/whitelabeling-with-react/page.jsx b/src/app/(main)/articles/whitelabeling-with-react/page.jsx index 26f22e9..08b3b5b 100644 --- a/src/app/(main)/articles/whitelabeling-with-react/page.jsx +++ b/src/app/(main)/articles/whitelabeling-with-react/page.jsx @@ -24,7 +24,7 @@ export default function Page() { With React we actually have a built in mechanism that makes this really easy: React contexts. If we create a context for our labeling then all we have to do is set the label at the top of the component hierarchy and the rest of the application can just utilize the selected label. This is similar to how themeing is often done in React.

- To make this even easier I've packaged up the context and its providers and consumers into an npm package: react-whitelabel. + To make this even easier I've packaged up the context and its providers and consumers into an npm package: react-whitelabel.

So how do we use this package to white-label our React app? Here is a basic example: @@ -75,7 +75,7 @@ class HeaderComponent extends React.Component { // white-label context so we can access the 'label' prop. const Header = withWhiteLabelContext(HeaderComponent);`}

- To see a fully working example check out the docs. + To see a fully working example check out the docs.

So how does this example work? First we setup our labels. This is just a Javascript object where each key maps to a label. Each label is also an object made up of referenceable keys. The WhiteLabelProvider then takes the labels and the selected label as input and then provides the selected label's object to the rest of the app. This object is accessible using a WhiteLabelConsumer or the withWhiteLabelContext wrapper. If we then made the selectedLabel dynamic, say via calling window.location.hostname, then we would have a fully run time dynamic white-label. @@ -84,7 +84,7 @@ const Header = withWhiteLabelContext(HeaderComponent);`} Also note that we are using the selected label's name as a class name in a top level div. This allows us to use the white-labeling with our CSS assets just by selecting based on the label name like {`.cars a { ... }`}.

- While the react-whitelabel library is not necessary for React run time white-labeling it does make it easier and more maintainable. If you implement it yourself you will likely do the same thing the library already does for you. If your interested learning more about react-whitelabel feel free to checkout the docs or the npm page. + While the react-whitelabel library is not necessary for React run time white-labeling it does make it easier and more maintainable. If you implement it yourself you will likely do the same thing the library already does for you. If your interested learning more about react-whitelabel feel free to checkout the docs or the npm page.

);