styled-ax
styled-components theme accessor
Overview
styled-ax (short for accessor) creates a theme property accessor for styled-components. It supports easy access of top level and nested object keys on a theme, as well as a simple interface for piping the accessed values through a chain of functions.
Usage
First you'll need to create a theme and pass it to styled-components ThemeProvider
as you normally would.
styled-ax supports the following theme structure:
// theme.js // top level keys subtle: `floralwhite` // and/or single level deep objects color: subtle: `antiquewhite`
Next, create your accessor, passing in your theme:
// or `const styledAx = require(`styled-ax`).default` const ax =
Or if running in browser:
Now, instead of default theme usage, where we
color: $ propsthemesubtle;
You can
color: $;
Or if subtle
is a property of a color
object on your theme (like in the above example), you can
const color = ax const SubtleP = styledp` color: ;`
Note that
color
above is just an example - you can call your keys and nested objects whatever you want
Asking for multiple values will return them joined:
// theme = { a: `1px`, b: `2px` }`margin: ;`// => margin: 1px 2px;
... unless they are passed to a function, which will receive the values spread
`margin: em`// stripUnit would be called as stripUnit(`1px`, `2px`)
which brings us to...
Functions
Accessors can take an optional spread of functions to operate on accessed values. The functions form a left to right pipeline, where the first function is passed a spread of the accessed theme values in order, and the following operate on the result:
color: $ darken;
The mix
and darken
functions in the example could be implemented with chroma-js
const darken = // if your function accepts parameters, use partial applicationconst mix = chroma
Tips
Export nested key accessors
At styled-ax creation time, you should export all the functions that reference nested keys for greater readability:
// my-ax.jsconst theme = color: {} font: {} size: {} media: {} const ax = const color = axcolorconst font = axfontconst size = axsizeconst media = axmedia
then you can
Conditionals
An accessor accepts values and returns a function that expecting props, so if you need some conditional based on props, you can pass them into ax manually
`color: ;`
Even better, as that's pretty awkward, you can use styled-ax along with
ifProp
from styled-tools!
`color: `
Install
yarn add styled-ax
npm i styled-ax