ϟ hyp

WIP Functional UI component microlibrary with ES6 tagged template literal

npm i hyp

// Example component
import h from 'hyp'

const Button = ({
  text,
  ...props
}) => {
  const cx = {
    display: 'inline-block',
    fontFamily: 'inherit',
    fontSize: 'inherit',
    margin:0,
    padding: 8,
    border: 0,
    cursor: 'pointer',
    color: 'white',
    backgroundColor: 'black',
    MozAppearance: 'none',
    WebkitAppearance: 'none',
    ':hover': {
      backgroundColor: '#07c'
    }
  }

  return h`
    <button css=${cx} ${props}>
      ${text}
    </button>
  `
}

export default Button

About

hyp is a wrapper around the bel library that adds support for CSS-in-JS using cxs, which handles pseudoclasses and media queries in functional UI components.

Related libraries

• bel
• yo-yo
• choo
• cxs

MIT License