Horror

React HTML elements with CSS-in-JS.

View Documentation Download Source 
npm i horror styled-components

Quick Start

To create a Horror starter project, run:

npm init horror my-horror-project

Usage

import React from 'react'
import { Div, H1 } from 'horror'

export default props =>
  <Div css={{
    padding: '32px'
  }}>
    <H1 css={`color: red;`}>
      Horror
    </H1>
  </Div>
  • Includes all HTML elements
  • Use object literal or CSS syntax
  • Style any component
  • Support for [styled-components][sc] or [emotion][emotion]

HTML Tags

Changing the underlying HTML tag can be done in any of the following ways:

  • Importing the tag directly: import { Header } from 'horror'
  • Using a key on the default import: <Horror.header />
  • Using the is prop: <Horror is='header' />
  • Using the styled-components API: const H1 = Horror.withComponent('h1')

Using Custom Components

To use a custom component, pass it to the is prop:

import React from 'react'
import { Link } from 'react-router-dom'
import H from 'horror'

const RedLink = props =>
  <H
    {...props}
    is={Link}
    css={{
      color: 'red'
    }}
  />

Creating Style Components

Horror can be used to create component primitive abstractions, similar to using [styled-components][sc] or [react-emotion][emotion],
but with a more React-like syntax.

import React from 'react'
import H from 'horror'

const Button = ({
  primary,
  ...props
}) =>
  <H.button
    {...props}
    css={{
      fontFamily: 'inherit',
      fontSize: '14px',
      fontWeight: 'bold',
      textAlign: 'center',
      textDecoration: 'none',
      display: 'inline-block',
      margin: 0,
      paddingLeft: '16px',
      paddingRight: '16px',
      paddingTop: '8px',
      paddingBottom: '8px',
      verticalAlign: 'middle',
      appearance: 'none',
      border: 0,
      borderRadius: '4px',
      color: 'white',
      backgroundColor: primary ? '#07c' : '#444',
      '&:hover': {
        boxShadow: 'inset 0 0 0 64px rgba(0, 0, 0, .125)'
      }
    }}
  />

Button.displayName = 'Button'

export default Button

Emotion

Horror also works with [emotion][emotion]:

npm i emotion react-emotion

import H from 'horror/emotion'

GitHub