Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jxnblk/horror
:scream: React HTML elements with CSS-in-JS
https://github.com/jxnblk/horror
components css css-in-js emotion html react styled-components
Last synced: about 1 month ago
JSON representation
:scream: React HTML elements with CSS-in-JS
- Host: GitHub
- URL: https://github.com/jxnblk/horror
- Owner: jxnblk
- License: mit
- Archived: true
- Created: 2018-06-09T15:41:10.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-01T22:41:39.000Z (over 6 years ago)
- Last Synced: 2024-08-01T22:46:15.479Z (5 months ago)
- Topics: components, css, css-in-js, emotion, html, react, styled-components
- Language: JavaScript
- Homepage: https://jxnblk.com/horror/
- Size: 333 KB
- Stars: 78
- Watchers: 5
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Horror
:scream: React HTML elements with CSS-in-JS
https://jxnblk.com/horror
```sh
npm i horror styled-components
```
## Quick Start
To create a Horror starter project, run:
```sh
npm init horror my-horror-project
```
## Usage
```jsx
import React from 'react'
import { Div, H1 } from 'horror'
export default props =>
Horror
```
- 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: ``
- Using the `is` prop: ``
- Using the styled-components API: `const H1 = Horror.withComponent('h1')`
## Using Custom Components
To use a custom component, pass it to the `is` prop:
```jsx
import React from 'react'
import { Link } from 'react-router-dom'
import H from 'horror'
const RedLink = props =>
```
## 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.
```jsx
import React from 'react'
import H from 'horror'
const Button = ({
primary,
...props
}) =>
Button.displayName = 'Button'
export default Button
```
## Emotion
Horror also works with [emotion][emotion]:
```sh
npm i emotion react-emotion
```
```jsx
import H from 'horror/emotion'
```
## Related & Inspiration
- [styled-components][sc]
- [emotion][emotion]
- [jsxstyle](https://github.com/smyte/jsxstyle)
- [glamorous](https://github.com/paypal/glamorous)
[emotion]: https://github.com/emotion-js/emotion
[sc]: https://github.com/styled-components/styled-components/
[MIT License](LICENSE.md)
|
[Made by Compositor](https://compositor.io)