I'm pretty confident that the next generation of design-system tools like styled-system will be built on React hooks. So let's take a look at the early stages of how that might happen.
First, we'll init a default Gatsby site.
Gatsby has a nice ecosystem for plugins and
some sweet APIs for adding providers to the root of the application
so we'll install
gatsby-plugin-emotion to grab Emotion 10
and write a
function to provide a theme to our application.
emotion-theming instead of a raw context for
the memoization, theme merging, and
it provides. We'll build this theme object out as we go.
Because we're going to use hooks, we need the React alphas too.
So let's start taking out some of the app and moving values into our theme.
Our first attempt is to consume the context raw using
useContext. We simply replace the two colors in the file
with their theme equivalents. We also replace
Now this works, but it's not quite styled-system.
Styled-system allows us to use props to change colors and
scales inside of our system. So let's write
useColor allows us to pull values out of the theme and
fallback if not one by one. We can even associate them with
props and default arguments. No more custom APIs for
defaults! It's all React!
Now it may not seem as clean as dropping a function in a
styled component, but we gain more control over the props we
use and it becomes easier to compose styled-system hooks
into our own, more powerful hooks too. You could imagine a
useBox that replaces the
Box component from superbox.
MyThing supports the spacing scale, font scale, text
colors and more. Applicable to any element you're creating
and without a special
styled API so it becomes "just
React". This hypothetical example also takes care of
removing the used props from the props object for you, so no
need to destructure if you want more automatic control of
which props are enabled.
If we have
useBox return a css object, we can also compose
it with our existing styles.
And we can even get more specific like
What's the best hooks API for styled-system? Not a clue! We've only begun to explore the API design space, so I would be not surprised at all to see many different types of implementations arise over the next year as React hooks go stable release.