Recustom
Yet another way to handle styles in React.
How to use
Recustom is an "HOC factory" which helps mapping a component props and state to CSS custom properties and classes. It is inspired by the react-redux connect
API.
import custom from "recustom"; // will be computed as custom propertiesconst mapCustomProperties = props state color: propsimportant ? "red" : "black" textAlign: propsalignment // computed as --text-align; // will be computed as state classesconst mapStateClasses = props active active ; mapCustomProperties mapStateClassesSection;
Your wrapped component must receive in its props the className and the style.
// wrapped component { const className style bindState = thisprops; ; // allow the hoc to map state to custom properties and classes return <div = => <div ="subelement" /> </div> ; }
Your are now able to write powerful vanilla CSS :
/* a state */ /* a sub element */
The .Section
is generated from your component displayName
. You can however force any class name by passing a string as the first argument.
"NotASection" mapCustomProperties mapStateClasses Section;
Motivations
One of the most interesting feature of styled-components is the ability to pass props carried in our react components to the actual style.
We can leverage props in three different ways :
-
the prop contains a value relevant for the style :
const Section = styledsection`text-align: ; // i.e. alignment = 'left'`; -
the prop conditions a value :
const Section = styledsection`color: ;`; -
the prop conditions a set of properties :
const Section = styledsection`color: grey;font-weight: 300;;`;
Translate props to CSS custom properties
The first two use-cases can be handled with CSS custom properties.
But how can we translate component's props into CSS custom properties ?
This approach by Dan Bahrami is really interesting. It allows us to define custom properties locally in the following way :
<CustomProperties => <section ="Section">this will be aligned left</section></CustomProperties>
However these declarative approach may lead to some unnecessary complexity on the render function. Thus I decided to take the HOC approach.
Section;
It allows to easily map props received by our components to CSS custom properties. Note that textAlign
will be translated to --text-align
.
Translate props to classes
The last use-case is a bit different. In fact we cannot rely on CSS custom properties anymore. However we can rely on the most old school way to deal with dynamism with CSS : "state classes". It is a common way (still used in Bootstrap v4) to handle how an element change its display throughout interactions. And this is exactly what styled-components do in background.
{ return active ; // return anything 'classnames' npm module can handle} mapCustomProperties mapStateClassesSection;
To deal with this use case, I decided to go for the same approach as the "props to custom properties" mapper. Here you actually map the props of your component to "state classes" (i.e. active, visible, ...).
Extension
It is possible to extend an already stylized component using the same HOC, the exact same way :
; { return active: false // overide the inherited behavior } 'AlternativeSection' mapCustomProperties mapStateClassesSection;
You may have noticed our first argument which is mandatory to avoid className collision. If not provided, the className will fallback to the displayName of the wrapped component (in this case Section).
The provided mappers allows us to override the inherited behavior. Think that the response of the upper mapper is merged with the inherited mapper. That mean if you want to disable the active
"state class", you just need to return false for this key.