{"id":13394607,"url":"https://github.com/prometheusresearch-archive/react-stylesheet","last_synced_at":"2025-04-11T07:31:57.869Z","repository":{"id":48296307,"uuid":"41909130","full_name":"prometheusresearch-archive/react-stylesheet","owner":"prometheusresearch-archive","description":"Component based styling for your React applications","archived":false,"fork":false,"pushed_at":"2018-02-27T15:19:12.000Z","size":670,"stargazers_count":148,"open_issues_count":5,"forks_count":11,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-05-19T07:21:22.714Z","etag":null,"topics":["css-in-js","react","react-components"],"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/prometheusresearch-archive.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":"2015-09-04T10:00:32.000Z","updated_at":"2022-12-14T13:51:21.000Z","dependencies_parsed_at":"2022-09-19T00:30:10.367Z","dependency_job_id":null,"html_url":"https://github.com/prometheusresearch-archive/react-stylesheet","commit_stats":null,"previous_names":["prometheusresearch/react-stylesheet"],"tags_count":68,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prometheusresearch-archive%2Freact-stylesheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prometheusresearch-archive%2Freact-stylesheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prometheusresearch-archive%2Freact-stylesheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prometheusresearch-archive%2Freact-stylesheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prometheusresearch-archive","download_url":"https://codeload.github.com/prometheusresearch-archive/react-stylesheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223460632,"owners_count":17148760,"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-in-js","react","react-components"],"created_at":"2024-07-30T17:01:25.348Z","updated_at":"2024-11-07T05:14:11.557Z","avatar_url":"https://github.com/prometheusresearch-archive.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Stylesheet\n\n[![Build Status](https://img.shields.io/travis/prometheusresearch/react-stylesheet.svg)](https://travis-ci.org/prometheusresearch/react-stylesheet)\n[![NPM Version](https://img.shields.io/npm/v/react-stylesheet.svg)](https://npmjs.org/packages/react-stylesheet)\n\nComponent based styling approach for React applications.\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n**Table of Contents**\n\n- [Motivation](#motivation)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [`\u003cElement /\u003e`](#element-)\n    - [Styling based on state (hover, focus, ...)](#styling-based-on-state-hover-focus-)\n    - [Overriding component](#overriding-component)\n  - [`\u003cVBox /\u003e` and `\u003cHBox /\u003e`](#vbox--and-hbox-)\n  - [Styled component factories](#styled-component-factories)\n    - [Styling based on state (hover, focus, ...)](#styling-based-on-state-hover-focus--1)\n    - [Variants](#variants)\n    - [Type safety](#type-safety)\n  - [CSS helpers](#css-helpers)\n  - [Test utilities](#test-utilities)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Motivation\n\nThis library implements a components-based approach for styling React\napplications. Stying with components means styling with JS code.\n\nTo re-iterate on CSS-in-JS advantages:\n\n* Single language to define UI and to style it—JavaScript.\n\n* Existing tooling for JavaScript can be reused for stylesheets: linters, type\n  checkers, formatters, ...\n\n* A lot of features CSS is missing are present in JavaScript: modules,\n  functions, variables, ...\n\nFor more info on CSS-in-JS and its advantages see [the excellent\ntalk][css-in-js] by Vjeux.\n\nWhat makes React Stylesheet special:\n\n* React centric approach: there's no separate abstractions for styles, React\n  Stylesheet produces React components directly. You don't need to pass\n  `className` or `style` props around. The units of reusability are React\n  components.\n\n* Type safety: React Stylesheet is fully typesafe. That can help you catch typos\n  and invalid style values.\n\n* React Stylesheet compiles to CSS classes under the hood: that means `hover`,\n  `focus` states are supported.\n\n[css-in-js]: http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html\n\n\n## Installation\n\n```\n% npm install react-stylesheet\n```\n\n\n## Usage\n\n\n### `\u003cElement /\u003e`\n\n`\u003cElement /\u003e` component is a basic building block for styling:\n\n```\nimport {Element} from 'react-stylesheet'\n\n\u003cElement\n  background=\"red\"\n  color=\"yellow\"\n  padding={10}\u003e\n  I'm styled!\n\u003c/Element\u003e\n```\n\n#### Styling based on state (hover, focus, ...)\n\nFor each prop like `color`, `background`, ... there are versions with suffixes\n`*OnHover`, `*onActive`, `*onActive`, and `*onDisabled` which activate its style\nvalues when the corresponding state is being active.\n\nFor example there's an `\u003cElement /\u003e` which changes its background and text color\non hover:\n\n```\nimport {Element} from 'react-stylesheet'\n\n\u003cElement\n  background=\"red\"\n  backgroundOnHover=\"yellow\"\n  color=\"yellow\"\n  colorOnHover=\"red\"\n  padding={10}\u003e\n  I'm styled!\n\u003c/Element\u003e\n```\n\n#### Overriding component\n\nBy default `\u003cElement /\u003e` renders into `\u003cdiv /\u003e` DOM component but you can\noverride this with `Component` prop:\n\n```\n\u003cElement\n  Component=\"button\"\n  padding={10}\u003e\n  click me!\n\u003c/Element\u003e\n```\n\nIt can be a composite component but the requirement is that it takes `style` and\n`className` props.\n\n### `\u003cVBox /\u003e` and `\u003cHBox /\u003e`\n\n`\u003cVBox /\u003e` and `\u003cHBox /\u003e` are thin wrappers on top of `\u003cElement /\u003e` which\nimplement [flexbox][] layout mechanism.\n\n`\u003cVBox /\u003e` corresponds to a flex container with `flex-direction: column` and\n`\u003cHBox /\u003e` — `flex-direction: row`.\n\nAll properties which are supported by `\u003cElement /\u003e` are also supported by `\u003cVBox /\u003e`\nand `\u003cHBox /\u003e`.\n\n```\nimport {VBox, HBox} from 'react-stylesheet'\n\n\u003cVBox justifyContent=\"space-around\"\u003e\n  \u003cHBox flexGrow={1}\u003eBlock 1\u003c/HBox\u003e\n  \u003cHBox\u003eBlock 2\u003c/HBox\u003e\n\u003c/VBox\u003e\n```\n\nNote that the following defaults are applied:\n\n```\nHBox, VBox {\n  position: relative;\n\n  overflow: hidden;\n\n  margin: 0;\n  padding: 0;\n\n  display: flex;\n  align-items: stretch;\n  flex-basis: auto;\n  flex-shrink: 0;\n\n  min-height: 0;\n  min-width: 0;\n}\n```\n\n[flexbox]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n\n\n### Styled component factories\n\nThere's a way to produce styled components out of common components using\n`style(Component, stylesheet)` function:\n\n```\nimport {style} from 'react-stylesheet'\n\nlet Label = style('span', {\n  base: {\n    fontWeight: 'bold',\n    fontSize: '12pt',\n  }\n})\n```\n\nNow `Label` is a regular React component styled with `fontWeight` and\n`fontSize`. You can render into DOM and use as a part of React element tree:\n\n```\n\u003cLabel /\u003e\n```\n\n#### Styling based on state (hover, focus, ...)\n\nYou can specify styling for states (hover, focus, ...):\n\n```\nlet Label = style('span', {\n  base: {\n    fontWeight: 'bold',\n    fontSize: '12pt',\n    hover: {\n      textDecoration: 'underline'\n    }\n  }\n})\n```\n\nNow on hover you can see the underline appears.\n\n#### Variants\n\nSometimes you want a set of style variants and toggle them via JS:\n\n```\nlet Label = style('span', {\n  base: {\n    fontWeight: 'bold',\n    fontSize: '12pt',\n  },\n  emphasis: {\n    textDecoration: 'underline'\n  },\n})\n```\n\nNow to toggle any particular variant you need to pass a component a specially\nconstructed `variant` prop:\n\n```\n\u003cLabel variant={{emphasis: true}} /\u003e\n```\n\n#### Type safety\n\nReact DOM Stylesheet comes with Flow typings which precisely describe available\nAPI.\n\nSome examples of the type errors you can get:\n\n```\nstyle('span', {\n  display: 'oops' // display can only be \"none\" | \"block\" | ...\n})\n\nstyle('span', {\n  isplay: 'block' // unknown property \"isplay\"\n})\n```\n\n### CSS helpers\n\nThere's helpers for producing CSS values:\n\n```\nimport {css} from 'react-stylesheet'\n\nlet Label = style('span', {\n  base: {\n    border: css.border(1, css.rgb(167)),\n  }\n})\n```\n\n### Test utilities\n\nReact Stylesheet comes with snapshot serializers for [Jest][] test framework.\n\nThe example test setup looks like this:\n\n    import React from 'react';\n    import renderer from 'react-test-renderer';\n\n    import {Element} from 'react-stylesheet';\n    import * as TestUtils from 'react-stylesheet/testutils';\n\n    expect.addSnapshotSerializer(TestUtils.snapshotSerializer);\n\n    function Hello() {\n      return \u003cElement color=\"red\" colorOnHover=\"black\"\u003eHEllo!\u003c/Element\u003e\n    }\n\n    test('rendering \u003cHello /\u003e', function() {\n      const tree = renderer.create(\u003cHello /\u003e).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\nWhich produces the following snapshot:\n\n    \u003cdiv\n      className={\n        StyleJoin [\n          PrecompiledCSS {\n            \"boxSizing\": \"border-box\",\n          },\n          DynamicallyGeneratedCSS {\n            \"hover\": Object {\n              \"color\": \"black\",\n            },\n          },\n        ]\n      }\n      style={Object {\n        \"hover\": \"red\",\n      }}\n    \u003e\n      Hello\n    \u003c/div\u003e\n\nAlternatively if you don't want to call `expect.addSnapshotSerializer(..)` line\nin each of your test files you can the following config to your `package.json`:\n\n    \"jest\": {\n      \"snapshotSerializers\": [\"react-stylesheet/testutils-snapshot-serializer\"]\n    }\n\nThis will enable snapshot serializers for each of your test files.\n\n[Jest]: https://facebook.github.io/jest/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprometheusresearch-archive%2Freact-stylesheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprometheusresearch-archive%2Freact-stylesheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprometheusresearch-archive%2Freact-stylesheet/lists"}