{"id":17148933,"url":"https://github.com/planttheidea/react-style-tag","last_synced_at":"2025-04-13T06:36:48.074Z","repository":{"id":10577574,"uuid":"66222760","full_name":"planttheidea/react-style-tag","owner":"planttheidea","description":" Write styles declaratively in React","archived":false,"fork":false,"pushed_at":"2024-03-28T08:43:20.000Z","size":1638,"stargazers_count":68,"open_issues_count":3,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T09:05:45.788Z","etag":null,"topics":["react","stylesheets"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/planttheidea.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-21T22:01:04.000Z","updated_at":"2024-07-09T14:44:34.000Z","dependencies_parsed_at":"2023-01-13T16:24:30.672Z","dependency_job_id":"f0032e44-d6cb-4a57-8553-b36fca173eab","html_url":"https://github.com/planttheidea/react-style-tag","commit_stats":{"total_commits":74,"total_committers":5,"mean_commits":14.8,"dds":"0.44594594594594594","last_synced_commit":"9be832d009972c5bdb0923bbe2075694aec98911"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planttheidea%2Freact-style-tag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planttheidea%2Freact-style-tag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planttheidea%2Freact-style-tag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planttheidea%2Freact-style-tag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/planttheidea","download_url":"https://codeload.github.com/planttheidea/react-style-tag/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248675303,"owners_count":21143763,"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":["react","stylesheets"],"created_at":"2024-10-14T21:30:34.927Z","updated_at":"2025-04-13T06:36:48.044Z","avatar_url":"https://github.com/planttheidea.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-style-tag\n\nWrite styles declaratively in React\n\n## Table of contents\n\n- [react-style-tag](#react-style-tag)\n  - [Table of contents](#table-of-contents)\n  - [Installation](#installation)\n  - [Usage](#usage)\n  - [Implementation](#implementation)\n  - [Summary](#summary)\n  - [Scoped Styles](#scoped-styles)\n  - [Props](#props)\n      - [hasSourceMap](#hassourcemap)\n      - [isMinified](#isminified)\n      - [isPrefixed](#isprefixed)\n  - [Global Options](#global-options)\n  - [Development](#development)\n\n## Installation\n\n```\n$ npm i react-style-tag --save\n```\n\n## Usage\n\n```javascript\n// ES2015\nimport { Style } from 'react-style-tag';\n\n// CommonJS\nconst Style = require('react-style-tag').Style;\n```\n\n## Implementation\n\n```javascript\nimport React, { Component } from 'react';\n\nimport { Style } from 'react-style-tag';\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1 className=\"foo\"\u003eBar\u003c/h1\u003e\n\n      \u003cStyle\u003e{`\n          .foo {\n            color: red;\n\n            \u0026:hover {\n              background-color: gray;\n            }\n\n            @media print {\n              color: black;\n            }\n          }\n        `}\u003c/Style\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Summary\n\n`react-style-tag` creates a React component that will inject a `\u003cstyle\u003e` tag into the document's head with the styles that you pass as the text content of the tag. Notice above that the styles are wrapped in `` {` ``and`` `} ``, which create a template literal string. Internally, `react-style-tag` parses this text and applies all necessary prefixes via [`stylis`](https://github.com/thysultan/stylis.js). All valid CSS is able to be used (`@media`, `@font-face`, you name it), and you can use nesting via the use of the `\u0026` reference to the parent selector.\n\nThe style tag that is injected into the head will be automatically mounted whenever the component it is rendered in is mounted, and will be automatically unmounted whenever the component it is rendered in is unmounted.\n\n## Scoped Styles\n\nThere is an additional utility provided that can help to scope your styles in the vein of [CSS Modules](https://github.com/css-modules/css-modules), and this is `hashKeys`. This function accepts an array of keys to hash, and returns a map of the keys to their hashed values.\n\n```javascript\nimport { hashKeys, Style } from 'react-style-tag';\n\nconst { foo, bar } = hashKeys(['foo', 'bar']);\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cdiv className={foo}\u003eMy text is red due to the scoped style of foo.\u003c/div\u003e\n\n      \u003cdiv className={bar}\u003e\n        My text is green due to the scoped style of bar.\n      \u003c/div\u003e\n\n      \u003cdiv className=\"baz\"\u003eMy text is blue due to the global style of baz.\u003c/div\u003e\n\n      \u003cStyle\u003e{`\n          .${foo} {\n            color: red;\n          }\n\n          .${bar} {\n            color: green;\n          }\n\n          .baz {\n            color: blue;\n          }\n        `}\u003c/Style\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nNotice you can easily mix both scoped and global styles, and for mental mapping the scoped styles all follow the format `scoped__{key}__{hash}`, for example `scoped__test__3769397038`. The hashes are uniquely based on each execution of `hashKeys`, so the implementation can either be Component-specific (if defined outside the class) or instance-specific (if defined inside the class, on `componentDidMount` for example).\n\n## Props\n\nNaturally you can pass all standard attributes (`id`, `name`, etc.) and they will be passed to the `\u003cstyle\u003e` tag, but there are a few additional props that are specific to the component.\n\n#### hasSourceMap\n\n_boolean, defaults to false in production, true otherwise_\n\nIf set to `true`, it will render a `\u003clink\u003e` tag instead of a `\u003cstyle\u003e` tag, which allows source referencing in browser DevTools. This is similar to the way that webpack handles styles via its `style-loader`.\n\nThe use of sourcemaps require the use of `Blob`, which is supported in IE10+, Safari 6.1+, and all other modern browsers (Chrome, Firefox, etc.). If you browser does not support `Blob` and you want to use sourcemaps, you should include a polyfill. Recommended is [`blob-polyfill`](https://www.npmjs.com/package/blob-polyfill).\n\nMake sure this import occurs prior to the import of `react-style-tag` to ensure blob support is present.\n\n#### isMinified\n\n_boolean, defaults to true in production, false otherwise_\n\nIf set to `false`, it will pretty-print the rendered CSS text. This can be helpful in development for readability of styles.\n\n#### isPrefixed\n\n_boolean, defaults to true_\n\nIf set to `false`, it will prevent `stylis` from applying vendor prefixes to the CSS.\n\n## Global Options\n\nAll of the props available are also available as global options for all instances that can be set with the `setGlobalOptions` method:\n\n```javascript\nimport { setGlobalOptions } from 'react-style-tag';\n\nsetGlobalOptions({\n  hasSourceMap: true,\n  isMinified: true,\n  isPrefixed: false,\n});\n```\n\n## Development\n\nStandard stuff, clone the repo and `npm i` to get the dependencies. npm scripts available:\n\n- `build` =\u003e run rollup to build `dist` files\n- `dev` =\u003e run webpack dev server to run example app / playground\n- `dist` =\u003e runs `build` and `build:minified`\n- `lint` =\u003e run ESLint against all files in the `src` folder\n- `lint:fix` =\u003e runs `lint` with `--fix`\n- `prepublishOnly` =\u003e run `lint`, `typecheck`, `clean`, `test`, `transpile:es`, `transpile:lib`, and `dist`\n- `test` =\u003e run `jest` test functions with `NODE_ENV=test`\n- `test:coverage` =\u003e run `test`, but with coverage checker\n- `test:watch` =\u003e run `test`, but with persistent watcher\n- `transpile:lib` =\u003e run babel against all files in `src` to create files in `lib`\n- `transpile:es` =\u003e run babel against all files in `src` to create files in `es`, preserving ES2015 modules (for\n  [`pkg.module`](https://github.com/rollup/rollup/wiki/pkg.module))\n- `typecheck` =\u003e check for TypeScript errors\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplanttheidea%2Freact-style-tag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplanttheidea%2Freact-style-tag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplanttheidea%2Freact-style-tag/lists"}