{"id":15137678,"url":"https://github.com/royalicing/react-sow","last_synced_at":"2026-01-20T01:55:45.345Z","repository":{"id":57345085,"uuid":"54344711","full_name":"RoyalIcing/react-sow","owner":"RoyalIcing","description":"Nested styles for React components","archived":false,"fork":false,"pushed_at":"2016-08-23T12:19:52.000Z","size":15,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-03T21:22:33.220Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/RoyalIcing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-20T22:50:30.000Z","updated_at":"2018-11-08T09:50:00.000Z","dependencies_parsed_at":"2022-09-16T18:11:39.794Z","dependency_job_id":null,"html_url":"https://github.com/RoyalIcing/react-sow","commit_stats":null,"previous_names":["burntcaramel/react-sow"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoyalIcing%2Freact-sow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoyalIcing%2Freact-sow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoyalIcing%2Freact-sow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoyalIcing%2Freact-sow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RoyalIcing","download_url":"https://codeload.github.com/RoyalIcing/react-sow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445652,"owners_count":20939953,"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":[],"created_at":"2024-09-26T07:01:37.463Z","updated_at":"2026-01-20T01:55:45.304Z","avatar_url":"https://github.com/RoyalIcing.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-sow\nCustomizable styling for React components\n\n## Installation\n\n```sh\nnpm install react-sow --save\n```\n\n## Example\n\nCreate the styles you wish to use using `sow()`.\nTo render based on props, pass a function returning the style rules.\nOtherwise, just pass the style rules.\n\nYou can attach child stylers by using the second parameter.\n\n```javascript\n// styles.js\n\nimport sow from 'react-sow';\n\nexport const listStyler = sow(({ darkMode }) =\u003e ({\n\t// Styles\n\tlistStyle: 'none',\n\tbackgroundColor: ? darkMode : 'black' : 'white',\n}));\n\nexport const itemStyler = sow(({ darkMode }) =\u003e ({\n\tdisplay: 'block',\n\tcolor: ? darkMode : 'white' : 'black',\n}));\n```\n\nIn your pure components, accept the prop `styler`,\ndefaulting it to `defaultStyler` (imported from 'react-sow/default').\n\nThen on your main component, call and spread `styler()`,\noptionally passing props.\n\n```javascript\n// List.js\nimport React from 'react';\nimport defaultStyler from 'react-sow/default';\n\nfunction Item({ title, darkMode, styler = defaultStyler }) {\n\treturn (\n\t\t\u003cli { ...styler({ darkMode }) }\u003e\n\t\t\t{ title }\n\t\t\u003c/li\u003e\n\t);\n}\n\nexport default function List({ items, darkMode, styler = defaultStyler, itemStyler = defaultStyler }) { \n\treturn (\n\t  \u003cul { ...styler({ darkMode }) }\u003e\n\t\t{ items.map(item =\u003e (\n\t\t\t\u003cItem { ...item } darkMode={ darkMode } styler={ itemStyler } /\u003e\n\t\t)) }\n\t  \u003c/ul\u003e  \n\t);\n}\n```\n\nThen in your controller components, import your stylers and\nrender your pure components with them.\n\n```javascript\n// ListController.js\nimport React from 'react';\nimport List from './List';\nimport { listStyler, itemStyler } from './styles';\n\nexport default React.createClass({\n\tconstructor(props) {\n\t\tsuper(props);\n\t\t\n\t\t// State...\n\t},\n\t\n\tdisplayName: 'ListController',\n\t\n\trender() {\n\t\tconst { items, darkMode } = this.state;\n\t\treturn (\n\t\t\t\u003cList items={ items } darkMode={ darkMode } styler={ listStyler } itemStyler={ itemStyler } /\u003e\n\t\t);\n\t}\n});\n```\n\n## Combining stylers\n\n```javascript\nimport sow from 'react-sow';\n\nconst orangeTextStyler = sow({\n\tcolor: 'orange'\n});\n\nconst largeTextStyler = sow({\n\tfontSize: '2em'\n});\n\nconst headingStyler = sow.combine([\n\torangeTextStyler,\n\tlargeTextStyler\n]);\n```\n\n## :before and :after support\n\nYou can even use `:before` and `:after` in stylers, using `fallow()`\nThis works by lazily creating `\u003cstyle\u003e` elements and inserting\nthem into the `\u003chead\u003e` for you.\n\n```javascript\nimport sow from 'react-sow';\nimport { fallow } from 'react-sow/dom';\n\nconst getMakeGreatAgainClass = fallow({\n\tbefore: {\n\t\tcontent: 'Make '\n\t},\n\tafter: {\n\t\tcontent: ' great again'\n\t}\n});\n\nfunction Slogan({ subject }) {\n\treturn (\n\t\t\u003ch2 className={ getMakeGreatAgainClass() }\u003e\n\t\t\t{ slogan }\n\t\t\u003c/h2\u003e\n\t);\n}\n```\n\nYou can use fallow with stylers by passing it to\nthe `classes` style prop:\n\n```javascript\nconst makeGreatAgainStyler = sow({\n\tclasses: [getMakeGreatAgainClass],\n});\n\nfunction Slogan({ subject }) {\n\treturn (\n\t\t\u003ch2 { ...makeGreatAgainStyler() }\u003e\n\t\t\t{ slogan }\n\t\t\u003c/h2\u003e\n\t);\n}\n```\n\nIn fact, you can use any function that returns a class name,\nor even a string:\n\n```javascript\nvar tookRedPill = true;\n\nfunction getRealityClass() {\n\tif (tookRedPill) {\n\t\treturn 'real-world';\n\t}\n\telse {\n\t\treturn 'the-matrix';\n\t}\n}\n\nconst makeGreatAgainStyler = sow({\n\tclasses: [getRealityClass, 'use-crazy-fonts'],\n});\n```\n\nThe function could even lazily create a class when rendering,\nand that in fact is exactly how `fallow()` works.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyalicing%2Freact-sow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froyalicing%2Freact-sow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyalicing%2Freact-sow/lists"}