chameleon
v0.2.0
> Never mix business logic and styles again!
0/weekUpdated 3 years agoMITUnpacked: 17.8 KB
Published by Robert Balicki
npm install chameleonChameleon
> Never mix business logic and styles again!
What is Chameleon?
Chameleon is a library that allows you write components that are styled differently depending on where they are in your app. A
Styles changes in Chameleon are handled very simply. Style information is passed down through React's context. This context is updated using a contextReducer. Presentational components read that context and render appropriately. That's it!
The goal of Chameleon is to allow you to completely separate styles from business logic.
Quick overview of how to use Chameleon
In this quick overview, we'll use Chameleon to make and , it ·will render at 35px. Within two nested sections, it will render at 30px, and so on.
* Step 1: Create your makeContextComponents. Let's write one:
``js
// StyleContext.js
import { makeContextComponents } from 'chameleon';
const initialContext = { sectionDepth: 0 };
const contextReducer = (previousContext, { type }) => {
if (type === 'INCREMENT_SECTION_DEPTH') {
return {
...previousContext,
sectionDepth: previousContext.sectionDepth + 1,
};
}
return previousContext;
};
const { UpdateContext, ContextProvider } = makeContextComponents(contextReducer, initialContext);
export {
UpdateContext,
ContextProvider,
};
`
* Step 2: Make a Section component that wraps UpdateContext.
`js`
// Section.js
export default ({ children }) => (
{ children }
* Now, let's make a heading component which reads the sectionDepth from the context.
`js
// Header.js
export default const ({ children }) => (
const Header = styled.span
fontSize: ${40 - context.sectionDepth * 5}px;
;`
return
}});
* Use them!
`js`
const MyArticle = () => ();
Installation
`bash`
yarn add chameleon
That was a silly, contrived example... what else should one use Chameleon for?
Chameleon is for managing all aspects of style. For example:
* It can manage the color palette or theme (e.g. having separate night and day modes, or varying color schemes across sections of a marketing site). Whitelabel your site and use Chameleon to match a vendor's style. Pair this with CSS transitions and watch your whole site effortlessly transition!
* It can modify the font size, color, etc. of elements when they are placed within a modal, panel or section, or when nested within two panels!
* Turn off pointer-events and modify the cursor for a section of the site that is disabled, or which is behind a modal.
* Control flex, css grid or regular layout of children. For an example, a can render differently within an or within a
Recommended patterns
For the sake of brevity, the minimal example omits several patterns and advanced features.
* Create components that wrap . In the minimal example, there's no reason to simplify the API. But once you start passing more parameters to , you will benefit from components like the following:
`js`
// Nightmode.js
import React from 'react';
import { UpdateContext } from './StyleContext';
const NightMode = ({ children }) =>
bgColor="black"
color="white"
{/ etc /}
>
{ children }
Note: You can also consider simplifying your action's API. type="CHANGE_MODE" mode="NIGHT" might be sufficient, and not require a wrapping component.
* Wrap the context in a class, and have derived setters and getters. Make the class immutable by having all setters return a new instance of the class. Both of these are very important for larger projects. Example:
`js
// StyleContext.js
import styled from 'styled-components';
class StyleContext {
constructor(context) {
this.context = context;
}
get foregroundStyleFromMode() {
return ({
NIGHT:
color: yellow;
&:hover {
color: gold;
}
,
DAY:
color: blue;
&:hover {
color: cyan;
}
,
})[this.context.mode];
}
get headingStyleFromSectionDepth() {
return
font-size: ${40 - 5 * this.context.sectionDepth}px;
line-height: 1em;
font-weight: ${800 - 100 * this.context.sectionDepth};
margin-bottom: ${20 - 2 * this.context.sectionDepth}px;
;
}
get Header() {
return styled.span
${this.foregroundStyleFromMode}
${this.headingStyleFromSectionDepth}
;
}
incrementSectionDepth() {
return new StyleContext({
...this.context,
sectionDepth: this.context.sectionDepth + 1,
});
}
}
const contextReducer = (previousContext, action) => {
switch (action.type) {
case "INCREMENT_SECTION_DEPTH":
return previousContext.incrementSectionDepth();
// ... case "CHANGE_MODE": ...
}
return previousContext;
}
const initialContext = new StyleContext({
mode: 'DAY',
sectionDepth: 0,
});
const {
UpdateContext,
ContextProvider,
} = makeContextComponents(contextReducer, initialContext);
// Header.js
export default (props) => (
}
`
Let's take a minute to appreciate what we've achieved here. We have a component that is styled correctly in night and day modes, and which gets progressively smaller as it is wrapped in more sections. It even has correct hover behavior, thanks to the magic of styled components!
Furthermore, we have a clean API (contextReducer) for making multiple updates to the context! This means that, whenever we use a component that updates the context (a , or a component that indicates a modal has been overlaid), we don't need to worry about the whole context. We just need to know about the incremental change that we are making.
Lastly, we have set ourselves up for maximal code reuse. Many components (buttons, headings, emphasized text, etc.) might re-use the same colors, allowing us to reuse get foregroundStyleFromMode.
* Use the updateContextGenerator. makeContextComponents also returns updateContextGenerator, which is a convenient wrapper around . Example:
`js
const { UpdateContext, updateContextGenerator } = makeContextComponents(contextReducer, initialContext);
// the following are equivalent:
const IncrementSectionDepth = updateContextGenerator({ type: 'INCREMENT_SECTION_DEPTH' });
const IncrementSectionDepth = ({ children }) => (
{ children }
`
* Use the propertyComponentGenerator. makeContextComponents also returns propertyComponentGenerator, which is a convenient wrapper for very simple components. For example, the following are equivalent:
`js`
const Header = ({ ...props }) => (
}
const Header = propertyComponentGenerator(context => context.Header);
* Combine and to make components (such as 's, 's and 's) which are styled in a specific way and which also update their context.
* Throw errors in your contextReducer if you're entering an invalid state. If, for example, you don't want modals within modals, ensure that with:
`js``
case "ENTER_MODAL":
if (previousContext.isInModal) {
throw new Error('Cannot render nested modals');
}
return {
...previousContext,
isInModal: true,
};
Chameleon doesn't need to be for only styles
You're right. Do what's right for your project!