@essence/react-stylesheet

v1.2.4

Published

4 years ago

React Stylesheet

0High
0Medium
0Low

bconnorwhite

essence react stylesheet style css jsx

Why React Stylesheet?

React Stylesheet brings the full power of CSS to React.

Components throughout your app feed into a global stylesheet, giving you dynamic control. This is great for creating a CSS reset, building a theme, or adding styles not supported by React.

Controlling your styles from React makes stylesheets dynamic, allowing for adding styles to your stylesheet "just in time," or altering styles values based on theme changes. React Stylesheet also supports all CSS selectors, including pseudo classes and pseudo elements, as well as media queries and server-side rendering, and is fully typed.

✅ Pseudo Classes
✅ Pseudo Elements
✅ Media Queries
✅ Dynamic Themeing
✅ Server-side Rendering
✅ Fully Typed

Examples

Stylesheet Provider

import { StylesheetProvider, Stylesheet } from "@essence/react-stylesheet";

const sheets = [];

<StylesheetProvider id="my-stylesheet" sheets={sheets}>
  // nested a few layers down...
  <Stylesheet
    styles={{
      "button:hover": {
        backgroundColor: "#f00"
      }
    }} />
</StylesheetProvider>

Pseudo Classes

React Stylesheet adds support for pseudo classes, such as :hover. No more setting state with onHover just to change background color:

import { Stylesheet } from "@essence/react-stylesheet";

//...

<Stylesheet
  styles={{
    "button:hover": {
      backgroundColor: "#f00"
    }
  }} />

Pseudo Elements

React Stylesheet also supports pseudo elements, such as ::placeholder:

import { Stylesheet } from "@essence/react-stylesheet";

//...

<Stylesheet
  styles={{
    "::placeholder": {
      color: "#f00"
    }
  }} />

Any selector you can use in CSS, you can use with React Stylesheet:

Commas: "h1,h2,h3"
Brackets: "input[type=button]"
etc.

Media Queries

React Stylesheet also allows for responsive styling through media queries without loading an external stylesheet:

import { Stylesheet } from "@essence/react-stylesheet";

//...

<Stylesheet
  styles={{
    "html": {
      backgroundColor: "#fff"
    }
  }},
  mediaQueries={{
    "@media(min-width: 420px)": {
      backgroundColor: "#f00"
    },
    "@media(min-width: 720px)": {
      backgroundColor: "#0f0"
    },
    "@media(min-width: 1200px): {
      backgroundColor: "#00f"
    }
  }} />

Dynamic Theming

Use style changes on state trigger to create multiple themes. This can be done through simple toggles, or by switching out larger style objects.

import { Stylesheet } from "@essence/react-stylesheet";

//...

const [darkMode, setDarkMode] = useState(false);

//...

<Stylesheet
  styles={{
    "html": {
      backgroundColor: darkMode ? "#000" : "#fff"
    },
    ...(darkMode ? darkModeStyles : lightModeStyles)
  }} />

Server Side Rendering

React Stylesheet also works on the server:

import { serverStyle } from "@essence/react-stylesheet";

const sheets = [];
const id = "my-stylesheet";
const stylesheetString = serverStyle(sheets, id);

const html = `
  <!doctype html>
  <html>
      <head>
          ${stylesheetString}
      </head>
      <body>
          <div>
              // React stuff here
          </div>
      </body>
  </html>
`;

TypeScript

React Stylesheet comes fully typed:

import { Sheet, MediaQueries, StyleSet, Style } from "@essence/react-stylesheet";

type Sheet = {
  default?: StyleSet;
  mediaQueries?: MediaQueries;
}

type MediaQueries = {
  [mediaQuery: string]: StyleSet;
}

type StyleSet = {
  [selector: string]: Style;
}

type Style = CSSProperties;
// This is the same CSSProperties type used by React, which means that all
// styles which normally work with React components will work with React Stylesheet.

Utility Functions

import { combineSheets } from "@essence/react-stylesheet";

const sheet1 = {
  default: {
    "html": {
      backgroundColor: "#fff"
    }
  }
};

const sheet2 = {
  "@media(min-width: 720px)": {
    "html": {
      backgroundColor: "#000"
    }
  }
};

const sheet = combineSheets([sheet1, sheet2]);
// sheet = {
//   default: {
//     "html": {
//       backgroundColor: "#fff"
//     }
//   }
//   "@media(min-width: 720px)": {
//     "html": {
//       backgroundColor: "#000"
//     }
//   }
// }

FAQ

Why not use an external stylesheet?

Controlling your stylesheet in React allows for styles to be created and changed dynamically.

Why not use the inline style prop provided by React?

React Stylesheet adds support for pseudo classes, pseudo elements, and media queries.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme