classier-react v1.0.0-alpha.9

🎩 Classier React 🥂

We keep putting styles in Javascript. We've developed these rather awesome and complex toolchains to have tools like Rebass. But most browser apps don't need an alternative to CSS, and without it, styles aren't re-used and they don't cascade!

Awesome style libraries already exist for browsers, its just awkward to make use of them when you're writing react. Cramming everything into that className string feels wrong.

classier-react solves the problem by simply translating from props to CSS classes. Its not generating code and its not pushing the browser to its limits.

const Button = props =>
  <Box rounded bg="blue" py={2} px={4} {...props} is='button' />

Think of it like weaponized classnames.

Install

npm install classier-react

Getting started

You'll have to have configured your build toolchain with a style loader and have added some styles to use the tool. This usually isn't very much setup.

See the TailwindCSS Recipe for an example configuration thats one of the more complicated.

Usage

Note: This example uses utility classes from TailwindCSS.

You'll define your presentational components:

import { Box, Comp } from 'classier-react'

const Card = props => (
  <Box rounded shadow="lg" maxW="sm" overflow="hidden" {...props} />
)

const CardHeroImage = ({ src, ...rest }) => (
  <Comp w="full" border={['black', 'solid']} {...rest}>
    <img src={src} />
  </Comp>
)

const CardTitle = ({ size = 5, ...rest }) => (
  <Box is={'h' + size} text="xl" font="bold" mb={2} {...rest} />
)

const CardBody = props => <Box px={6} py={4} {...props} />

And then consume them as usual:

<Card maxW="md">
  <CardHeroImage src={image} border={false} />
  <CardTitle>So Classy</CardTitle>
  <CardBody>Lorem ipsum...</CardBody>
</Card>

Translation to style names

Under the hood, classier-react assumes any unknown props are declared as modifiers in your stylesheet. Props are translated to these declarations according to simple rules:

• Any props with an explicit false value are omitted

• prop values are appended to their names

  • each value of an array will generate its own prop class

• camelCase words become kebab-cased

• Sentence-casing is preserved but not added

Passing down styles

<Comp /> only injects the props it merges, it can't make sure they are rendered. If you're wrapping or writing a component, it's a good idea to pass any props you don't use onward to what is rendered.

Most components are already written this way.

const MyComponent = ({ option, ...rest }) => <div {...rest} />

CSS Modules

classier-react supports using CSS Modules through dynamic object keys:

import styles from './styles.css'

<Box {...{
  [styles.fontSize]: 'md'
}} {...rest} />

API

import { Box, Comp, cx, configure } from 'classier-react'

<Box />

Renders a tag with its unknown props translated to CSS classes.

props

• is: the tag to render as (default: 'div')

<Comp />

A HOC for injecting or "composing" style props. Merges its style, className, and the rest of its props as classes into the props of a child component.

cx(props, ...extraClasses)

Transform the passed props into a className string. Called by Box and Comp.

configure(opts)

Lets you change the global behavior of cx

opts

• kebabCase - Transform names and values from camelCase. Reverses style-loader. (default: true)

• keepSentence - When kebabing, lower-case everything but the first word (default: true)

• join.words - the string to insert between the words in a camelCase identifier (default: '-')

• join.value - the string to insert to separate a value (default: '-')