{"id":15365934,"url":"https://github.com/andywer/react-usestyles","last_synced_at":"2025-04-06T05:15:33.127Z","repository":{"id":33261328,"uuid":"156188105","full_name":"andywer/react-usestyles","owner":"andywer","description":"🖍 Style components using React hooks. Abstracts the styling library away.","archived":false,"fork":false,"pushed_at":"2024-11-20T08:25:41.000Z","size":1372,"stargazers_count":87,"open_issues_count":8,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T04:08:37.717Z","etag":null,"topics":["css","css-in-js","jss","react","react-hooks"],"latest_commit_sha":null,"homepage":"","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/andywer.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-05T08:58:15.000Z","updated_at":"2024-10-31T10:08:10.000Z","dependencies_parsed_at":"2024-02-20T23:22:55.551Z","dependency_job_id":"b0be8314-b18e-4046-a714-8bcf06ac4bae","html_url":"https://github.com/andywer/react-usestyles","commit_stats":{"total_commits":58,"total_committers":2,"mean_commits":29.0,"dds":"0.43103448275862066","last_synced_commit":"ddc14dd57cb622e837a45d9a4dec12cfdeb91c10"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Freact-usestyles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Freact-usestyles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Freact-usestyles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Freact-usestyles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andywer","download_url":"https://codeload.github.com/andywer/react-usestyles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436285,"owners_count":20938533,"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":["css","css-in-js","jss","react","react-hooks"],"created_at":"2024-10-01T13:16:45.020Z","updated_at":"2025-04-06T05:15:32.900Z","avatar_url":"https://github.com/andywer.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Unified React styling hook\n\nLeveraging the [React Hooks API](https://reactjs.org/docs/hooks-intro.html) to provide an elegant, unified styling API.\n\nOne simple API based on the hooks API to style all components. Suddenly it does not matter anymore if you are using Emotion, Styled Components or JSS - the styling becomes transparent.\n\nGreat for component libraries: Don't force your users into a particular styling library! Style with universal hooks and let the users plug-in the styling library that works best for them.\n\n#### Features\n\n💅 Style components with `useStyles()`\u003cbr /\u003e\n💡 Uncouple components from styling library\u003cbr /\u003e\n🌅 Server side rendering\u003cbr /\u003e\n🌈 Theming support out of the box\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Any feedback welcome! Leave [a comment](https://github.com/andywer/react-usestyles/issues/2) or 🌟 the repo.**\n\n⚠️\u0026nbsp;\u0026nbsp;Attention: Bleeding edge ahead. Don't use this in production.\n\n\n## Installation\n\nIn your app:\n\n```sh\n$ npm install react@next react-dom@next @andywer/style-hook @andywer/style-api-jss\n```\n\nIn a component package you only need this:\n\n```sh\n$ npm install react@next @andywer/style-hook\n```\n\n\n## Live Playgrounds\n\nHere are some code sandboxes to see the style hooks in action. You can also see the source code and live-edit it:\n\n😸 Basics - \u003chttps://codesandbox.io/s/zx4o632n8l\u003e\u003cbr /\u003e\n🖥 Material-UI / Simple Hacker News client - \u003chttps://codesandbox.io/s/myo47mvjw9\u003e\u003cbr /\u003e\n\n\n## Usage\n\n### `useStyles()`\n\n```jsx\n// Button.js\nimport { useStyles } from \"@andywer/style-hook\"\nimport React from \"react\"\n\nexport function Button (props) {\n  const classNames = useStyles({\n    button: {\n      padding:    \"0.6em 1.2em\",\n      background: theme =\u003e theme.button.default.background,\n      color:      theme =\u003e theme.button.default.textColor,\n      border:     \"none\",\n      boxShadow:  \"0 0 0.5em #b0b0b0\",\n      \"\u0026:hover\": {\n        boxShadow: \"0 0 0.5em #e0e0e0\"\n      }\n    },\n    buttonPrimary: {\n      background: theme =\u003e theme.button.primary.background,\n      color:      theme =\u003e theme.button.primary.textColor\n    }\n  })\n\n  const className = `${classNames.button} ${props.primary ? classNames.buttonPrimary : \"\"}`\n  return (\n    \u003cbutton className={className} onClick={props.onClick}\u003e\n      {props.children}\n    \u003c/button\u003e\n  )\n}\n```\n\nRendering your app with style hook support is easy:\nAdd a provider for the styling library at the top of your app.\n\n```jsx\n// App.js\nimport { JssProvider } from \"@andywer/style-api-jss\"\nimport React from \"react\"\nimport ReactDOM from \"react-dom\"\n\nconst App = () =\u003e (\n  \u003cJssProvider\u003e\n    {/* ... */}\n  \u003c/JssProvider\u003e\n)\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"app\"))\n```\n\n### `useStyle()`\n\nThis is a convenience function to define a single CSS class.\n\n```jsx\nimport { useStyle } from \"@andywer/style-hook\"\nimport React from \"react\"\n\nexport function Button (props) {\n  const className = useStyle({\n    padding:   \"0.6em 1.2em\",\n    boxShadow: \"0 0 0.5em #b0b0b0\",\n    \"\u0026:hover\": {\n      boxShadow: \"0 0 0.5em #e0e0e0\"\n    }\n  })\n  return (\n    \u003cbutton className={className} onClick={props.onClick}\u003e\n      {props.children}\n    \u003c/button\u003e\n  )\n}\n```\n\n### Theming \u0026 props\n\n```jsx\nimport { useStyles } from \"@andywer/style-hook\"\nimport React from \"react\"\n\nexport function Button (props) {\n  const classNames = useStyles({\n    button: {\n      background: theme =\u003e theme.button.default.background,\n      color:      theme =\u003e theme.button.default.textColor,\n      border:     () =\u003e props.border || \"none\",\n      boxShadow:  \"0 0 0.5em #b0b0b0\",\n      \"\u0026:hover\": {\n        boxShadow: \"0 0 0.5em #e0e0e0\"\n      }\n    },\n    buttonPrimary: {\n      background: theme =\u003e theme.button.primary.background,\n      color:      theme =\u003e theme.button.primary.textColor\n    }\n  }, [props.border])\n\n  const className = `${classNames.button} ${props.primary ? classNames.buttonPrimary : \"\"}`\n  return (\n    \u003cbutton className={className} onClick={props.onClick}\u003e\n      {props.children}\n    \u003c/button\u003e\n  )\n}\n```\n\nFor details see the [`style-hook` package readme](https://github.com/andywer/react-usestyles/blob/master/packages/style-hook/README.md).\n\n\n## Details\n\n**For more details about the API and usage instructions, check out the [`style-hook` package readme](./packages/style-hook/README.md).**\n\n\n## API\n\n- [`style-hook`](./packages/style-hook) - The main package providing the hooks\n- [`style-api`](./packages/style-api) - Defines the API between styling library provider and hooks (internal)\n- [`style-api-jss`](./packages/style-api-jss) - The styling library provider for [JSS](http://cssinjs.org/)\n\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandywer%2Freact-usestyles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandywer%2Freact-usestyles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandywer%2Freact-usestyles/lists"}