{"id":16346593,"url":"https://github.com/matype/picostyle-react","last_synced_at":"2025-10-26T01:31:50.918Z","repository":{"id":57323955,"uuid":"100843648","full_name":"matype/picostyle-react","owner":"matype","description":"Picostyle for React","archived":false,"fork":false,"pushed_at":"2018-03-10T20:05:32.000Z","size":6,"stargazers_count":11,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-05T13:52:13.162Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matype.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-20T06:45:23.000Z","updated_at":"2022-07-18T20:37:25.000Z","dependencies_parsed_at":"2022-09-09T08:11:41.008Z","dependency_job_id":null,"html_url":"https://github.com/matype/picostyle-react","commit_stats":null,"previous_names":["picostyle/picostyle-react","matype/picostyle-react","morishitter/picostyle-react"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/matype/picostyle-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matype%2Fpicostyle-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matype%2Fpicostyle-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matype%2Fpicostyle-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matype%2Fpicostyle-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matype","download_url":"https://codeload.github.com/matype/picostyle-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matype%2Fpicostyle-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281047803,"owners_count":26435124,"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","status":"online","status_checked_at":"2025-10-25T02:00:06.499Z","response_time":81,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-10-11T00:35:43.719Z","updated_at":"2025-10-26T01:31:50.659Z","avatar_url":"https://github.com/matype.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Picostyle for React\n\n[![350 gzip][gzip-badge]][bundlesize]\n\n[gzip-badge]: https://img.shields.io/badge/minified%20\u0026%20gzipped-350%20B-brightgreen.svg\n[bundlesize]: https://github.com/siddharthkp/bundlesize\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/morishitter/picostyle\"\u003e\n    \u003cimg width=\"360px\" src=\"http://morishitter.github.io/picostyle.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\nPicostyle React is the package of [Picostyle](https://github.com/picostyle/picostyle) for [React](https://github.com/facebook/react).\n\n[Try it Online](https://codepen.io/morishitter/pen/qXaPYQ?editors=0010)\n\n## Features\n\n- **🚀 The smallest CSS-in-JS library**: Only 0.3 KB (minified \u0026 gzipped).\n- **👏 Zero dependencies**: And under 60 LOC.\n- **💅 Styled components**: Gives you a styled component like [styled-components](https://www.styled-components.com/) that y'all love.\n- **❤️ For React**: The 1 KB frontend library family.\n\n## Installation\n\n\u003cpre\u003e\n$ npm install \u003ca href=\"https://www.npmjs.com/package/picostyle-react\"\u003epicostyle-react\u003c/a\u003e\n\u003c/pre\u003e\n\n## Usage\n\nPicostyle React works well with:\n\n- Media Queries (`@media`)\n- Pseudo-element (`::before`)\n- Pseudo-classes (`:hover`)\n\n### With React\n\n[Get the Code](https://github.com/picostyle/picostyle-react/tree/master/example)\n\n```js\nimport React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport picostyle from \"picostyle-react\"\n\nconst ps = picostyle(React.createElement)\n\nconst keyColor = \"#f07\"\n\nconst Text = ps(\"h1\")({\n  fontSize: \"64px\",\n  cursor: \"pointer\",\n  color: \"#fff\",\n  padding: \"0.4em\",\n  transition: \"all .2s ease-in-out\",\n  \":hover\": {\n    transform: \"scale(1.3)\",\n  },\n  \"@media (max-width: 450px)\": {\n    fontSize: \"32px\",\n  },\n})\n\nconst Wrapper = ps(\"div\")({\n  display: \"flex\",\n  justifyContent: \"center\",\n  alignItems: \"center\",\n  width: \"100vw\",\n  height: \"100vh\",\n  backgroundColor: keyColor,\n})\n\nclass Hello extends React.Component {\n  render() {\n\n    return (\n      \u003cWrapper id=\"pico\"\u003e\n        \u003cText\u003ePicostyle\u003c/Text\u003e\n      \u003c/Wrapper\u003e\n    )\n  }\n}\n\nReactDOM.render(\n  \u003cHello /\u003e,\n  document.getElementById(\"app\")\n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatype%2Fpicostyle-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatype%2Fpicostyle-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatype%2Fpicostyle-react/lists"}