cxs-components

Styled UI component primitives for React - built with cxs

npm install cxs-components

Features

  • 7 KB
  • Simple API to quickly create UI components
  • Performant, functional CSS-in-JS
  • Uses native JavaScript objects
  • Avoids style collisions with hashed class selectors
  • Supports pseudoclasses, media queries, and keyframes

cxs-components' API is inspired by styled-components but instead of tagged template literals it uses plain JavaScript objects, which allow for the use of native JavaScript types without the need to escape embedded CSS.

For reasons similar to the motivations behind JSX, this is preferred over embedded CSS syntax.

”Template literals work well for long embedded DSLs. Unfortunately the syntax noise is substantial when you exit in and out of embedded arbitrary ECMAScript expressions with identifiers in scope.”

cxs-components helps enforce separation of style and business logic by promoting pure functional UI components – i.e. presentational or "dumb" components.


Usage


import React from 'react'
import comp from 'cxs-components'

const Box = comp('div')({
  padding: 32
})

const TomatoBox = comp(Box)({
  backgroundColor: 'tomato'
})

const App = () => (
  <div>
    <Box>
      Hello
    </Box>
    <TomatoBox>
      Tomato
    </TomatoBox>
  </div>
)