react-cxs-hoc

ϟ react-cxs-hoc

React higher order component for applying CSS style objects to components with cxs

npm i react-cxs-hoc

Higher order component

// Example HOC usage
import React from 'react'
import withCxs from 'react-cxs-hoc'
 
const Box = props => <div {...props} />
 
export default withCxs(Box)

// Example Grid component
import React from 'react'
import Box from './Box'
 
const Grid = ({
width = 1 / 2,
...props
}) => {
  const css = {
    boxSizing: 'border-box',
    display: 'inline-block',
    verticalAlign: 'top',
    paddingLeft: 32,
    paddingRight: 32,
    width: `${width * 100}%`
  }
 
  return <Box {...props} css={css} />
}
 
export default Grid

Base component

import React from 'react'
import { Base } from 'react-cxs-hoc'
 
const Button = ({ css = {}, ...props }) => {
  const css = {
    fontFamily: 'inherit',
    fontSize: 'inherit',
    display: 'inline-block',
    margin: 0,
    padding: 8,
    color: '#fff',
    backgroundColor: '#07c',
    borderRadius: 2,
    WebkitAppearance: 'none',
    MozAppearance: 'none',
    ':hover': {
      backgroundColor: '#06b'
    },
    ...css
  }
 
  return <Base {...props} tag='button' css={css} />
}

Related:

• cxs
• cxs-components
• react-cxs

MIT License