{"id":13630578,"url":"https://github.com/jxnblk/horror","last_synced_at":"2025-04-17T17:31:25.308Z","repository":{"id":67375974,"uuid":"136736227","full_name":"jxnblk/horror","owner":"jxnblk","description":":scream: React HTML elements with CSS-in-JS","archived":true,"fork":false,"pushed_at":"2018-09-01T22:41:39.000Z","size":341,"stargazers_count":77,"open_issues_count":0,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-08T22:36:41.357Z","etag":null,"topics":["components","css","css-in-js","emotion","html","react","styled-components"],"latest_commit_sha":null,"homepage":"https://jxnblk.com/horror/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jxnblk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-06-09T15:41:10.000Z","updated_at":"2024-09-19T01:25:21.000Z","dependencies_parsed_at":"2023-03-13T20:28:53.191Z","dependency_job_id":null,"html_url":"https://github.com/jxnblk/horror","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Fhorror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Fhorror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Fhorror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Fhorror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jxnblk","download_url":"https://codeload.github.com/jxnblk/horror/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249359977,"owners_count":21257143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","css","css-in-js","emotion","html","react","styled-components"],"created_at":"2024-08-01T22:01:47.829Z","updated_at":"2025-04-17T17:31:25.037Z","avatar_url":"https://github.com/jxnblk.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# Horror\n\n:scream: React HTML elements with CSS-in-JS\n\nhttps://jxnblk.com/horror\n\n```sh\nnpm i horror styled-components\n```\n\n## Quick Start\n\nTo create a Horror starter project, run:\n\n```sh\nnpm init horror my-horror-project\n```\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport { Div, H1 } from 'horror'\n\nexport default props =\u003e\n  \u003cDiv css={{\n    padding: '32px'\n  }}\u003e\n    \u003cH1 css={`color: red;`}\u003e\n      Horror\n    \u003c/H1\u003e\n  \u003c/Div\u003e\n```\n\n- Includes all HTML elements\n- Use object literal or CSS syntax\n- Style any component\n- Support for [styled-components][sc] or [emotion][emotion]\n\n## HTML Tags\n\nChanging the underlying HTML tag can be done in any of the following ways:\n\n- Importing the tag directly: `import { Header } from 'horror'`\n- Using a key on the default import: `\u003cHorror.header /\u003e`\n- Using the `is` prop: `\u003cHorror is='header' /\u003e`\n- Using the styled-components API: `const H1 = Horror.withComponent('h1')`\n\n## Using Custom Components\n\nTo use a custom component, pass it to the `is` prop:\n\n```jsx\nimport React from 'react'\nimport { Link } from 'react-router-dom'\nimport H from 'horror'\n\nconst RedLink = props =\u003e\n  \u003cH\n    {...props}\n    is={Link}\n    css={{\n      color: 'red'\n    }}\n  /\u003e\n```\n\n## Creating Style Components\n\nHorror can be used to create component primitive abstractions, similar to using [styled-components][sc] or [react-emotion][emotion],\nbut with a more React-like syntax.\n\n```jsx\nimport React from 'react'\nimport H from 'horror'\n\nconst Button = ({\n  primary,\n  ...props\n}) =\u003e\n  \u003cH.button\n    {...props}\n    css={{\n      fontFamily: 'inherit',\n      fontSize: '14px',\n      fontWeight: 'bold',\n      textAlign: 'center',\n      textDecoration: 'none',\n      display: 'inline-block',\n      margin: 0,\n      paddingLeft: '16px',\n      paddingRight: '16px',\n      paddingTop: '8px',\n      paddingBottom: '8px',\n      verticalAlign: 'middle',\n      appearance: 'none',\n      border: 0,\n      borderRadius: '4px',\n      color: 'white',\n      backgroundColor: primary ? '#07c' : '#444',\n      '\u0026:hover': {\n        boxShadow: 'inset 0 0 0 64px rgba(0, 0, 0, .125)'\n      }\n    }}\n  /\u003e\n\nButton.displayName = 'Button'\n\nexport default Button\n```\n\n## Emotion\n\nHorror also works with [emotion][emotion]:\n\n```sh\nnpm i emotion react-emotion\n```\n\n```jsx\nimport H from 'horror/emotion'\n```\n\n## Related \u0026 Inspiration\n\n- [styled-components][sc]\n- [emotion][emotion]\n- [jsxstyle](https://github.com/smyte/jsxstyle)\n- [glamorous](https://github.com/paypal/glamorous)\n\n[emotion]: https://github.com/emotion-js/emotion\n[sc]: https://github.com/styled-components/styled-components/\n\n[MIT License](LICENSE.md)\n|\n[Made by Compositor](https://compositor.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Fhorror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjxnblk%2Fhorror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Fhorror/lists"}