hyp

1.0.0-beta.5 • Public • Published

ϟ hyp

Build Status js-standard-style

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

MIT License

Readme

Keywords

none

Package Sidebar

Install

npm i hyp

Weekly Downloads

4

Version

1.0.0-beta.5

License

MIT

Last publish

Collaborators

  • jxnblk