jxnblk / Horror
Licence: mit
๐ฑ React HTML elements with CSS-in-JS
Stars: โญ 78
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Horror
tsstyled
A small, fast, and simple CSS-in-JS solution for React.
Stars: โญ 52 (-33.33%)
Mutual labels: components, styled-components, emotion, css-in-js
Styled Components Vs Emotion
a short doc comparing the popular CSS-in-JS libraries styled-components and emotion
Stars: โญ 204 (+161.54%)
Mutual labels: styled-components, css-in-js, emotion
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: โญ 761 (+875.64%)
Mutual labels: styled-components, css-in-js, emotion
Styled System
โฌข Style props for rapid UI development
Stars: โญ 7,126 (+9035.9%)
Mutual labels: styled-components, css-in-js, emotion
Design System
Priceline.com Design System
Stars: โญ 604 (+674.36%)
Mutual labels: components, styled-components, css-in-js
Filbert Js
A lightweight(~1kb) css-in-js framework
Stars: โญ 167 (+114.1%)
Mutual labels: styled-components, css-in-js, emotion
Styled Ppx
Typed styled components in Reason, OCaml and ReScript
Stars: โญ 236 (+202.56%)
Mutual labels: styled-components, css-in-js, emotion
Xstyled
A utility-first CSS-in-JS framework built for React. ๐
๐ฉโ๐คโก๏ธ
Stars: โญ 1,835 (+2252.56%)
Mutual labels: styled-components, css-in-js, emotion
Styled-Responsive-Media-Queries
Responsive Media Queries for Emotion styled or styled-components โ Standard size from Chrome DevTools.
Stars: โญ 33 (-57.69%)
Mutual labels: styled-components, emotion, css-in-js
satchel
The little bag of CSS-in-JS superpowers
Stars: โญ 14 (-82.05%)
Mutual labels: styled-components, emotion, css-in-js
Reactackle
Open-source components library built with React and Styled-Components.
Stars: โญ 278 (+256.41%)
Mutual labels: components, styled-components, css-in-js
Goober
๐ฅ goober, a less than 1KB ๐ css-in-js alternative with a familiar API
Stars: โญ 2,317 (+2870.51%)
Mutual labels: styled-components, css-in-js, emotion
Next Dark Mode
๐ Enable dark mode for Next.js apps
Stars: โญ 133 (+70.51%)
Mutual labels: styled-components, css-in-js, emotion
Grid
This package has moved and renamed
Stars: โญ 2,079 (+2565.38%)
Mutual labels: styled-components, css-in-js, emotion
React Next Boilerplate
๐ A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: โญ 129 (+65.38%)
Mutual labels: styled-components, css-in-js, emotion
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. ๐
Stars: โญ 428 (+448.72%)
Mutual labels: styled-components, css-in-js, emotion
Onno
Responsive style props for building themed design systems
Stars: โญ 95 (+21.79%)
Mutual labels: styled-components, css-in-js, emotion
Css In React
๐ญ CSS in React - Learn the best CSS in JS frameworks by example
Stars: โญ 101 (+29.49%)
Mutual labels: styled-components, css-in-js, emotion
lab-cli
Command line utilities and exporting module for Compositor Lab
Stars: โญ 52 (-33.33%)
Mutual labels: components, styled-components, emotion
Twin.macro
๐ฆนโโ๏ธ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: โญ 5,137 (+6485.9%)
Mutual labels: styled-components, css-in-js, emotion
Horror
๐ฑ React HTML elements with CSS-in-JS
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 or 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 or react-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:
npm i emotion react-emotion
import H from 'horror/emotion'
Related & Inspiration
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].