instyled
Generate React components that automatically switch styles in response to prop changes.
Quick Start
const SomeComponent =
This will give you a new component SomeComponent
that accepts properties hover
and deactivated
. It will automatically switch to the specified styling for a given combination of "truthy" property values.
So
<SomeComponent/>// -> <div style="color:red;"></div> <SomeComponent deactivated=true />// -> <div style="color:gray;"></div> <SomeComponent hover=true />// -> <div style="color:blue;"></div> <SomeComponent hover=true deactivated=true />// -> <div style="color:lightgray;"></div>
instyled
will figure out which style to apply for a given combination
Input Transforms
Maybe the default API seems overly verbose to you. API's are hard to get right, but don't worry, you're covered. instyled
comes with two built-in input transformers and makes it pretty easy to write your own.
Each of these will give you the same results as the first example above.
Specify styles with a hierarchical map
const instyled = const SomeComponent =
Specify styles with a flat map
const instyled = const SomeComponent =