All Projects → robinweser → React Css Component

robinweser / React Css Component

Licence: mit
Injecting CSS via React Components

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Css Component

Ui Box
Blazing Fast React UI Primitive
Stars: ✭ 847 (+764.29%)
Mutual labels:  react-component, css-in-js
Reflexbox
Moved to https://rebassjs.org
Stars: ✭ 1,369 (+1296.94%)
Mutual labels:  react-component, css-in-js
Nano Style
React functional CSS-in-JS
Stars: ✭ 85 (-13.27%)
Mutual labels:  css-in-js
Match Media
Universal polyfill for match media API using Expo APIs on mobile
Stars: ✭ 95 (-3.06%)
Mutual labels:  css-in-js
Stylex
Write CSS-in-JS with atomic support. Like Facebook's Stylex!
Stars: ✭ 90 (-8.16%)
Mutual labels:  css-in-js
React Easy Swipe
Easy handler for common swipe operations
Stars: ✭ 85 (-13.27%)
Mutual labels:  react-component
Re Resizable
📏 A resizable component for React.
Stars: ✭ 1,302 (+1228.57%)
Mutual labels:  react-component
React Image Smooth Loading
[not maintained] Images which just flick to appear aren't cool. Images which appear smoothly with a fade like Instagram are cool
Stars: ✭ 84 (-14.29%)
Mutual labels:  css-in-js
Rockey
Stressless CSS for components using JS. Write Component Based CSS with functional mixins.
Stars: ✭ 97 (-1.02%)
Mutual labels:  css-in-js
React Usestyles
🖍 Style components using React hooks. Abstracts the styling library away.
Stars: ✭ 89 (-9.18%)
Mutual labels:  css-in-js
React Cassette Player
Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.
Stars: ✭ 93 (-5.1%)
Mutual labels:  react-component
Zifi
zifi - Make Stories everywhere using React 😍
Stars: ✭ 87 (-11.22%)
Mutual labels:  react-component
Ui Predicate
Finally a Predicate/Rule Editor UI component for the Web 🚀
Stars: ✭ 86 (-12.24%)
Mutual labels:  react-component
Glamorous Primitives
💄 style primitive React interfaces with glamorous
Stars: ✭ 91 (-7.14%)
Mutual labels:  css-in-js
Compiled
A familiar and performant compile time CSS-in-JS library for React.
Stars: ✭ 1,235 (+1160.2%)
Mutual labels:  css-in-js
Onno
Responsive style props for building themed design systems
Stars: ✭ 95 (-3.06%)
Mutual labels:  css-in-js
Fake Tweet
Tweet React Component
Stars: ✭ 85 (-13.27%)
Mutual labels:  react-component
Scale
The Scale library offers a set of customizable web components written with Stencil.js & TypeScript. The default theme of the library can be easily replaced so that a corresponding corporate identity of a dedicated brand can be represented.
Stars: ✭ 87 (-11.22%)
Mutual labels:  css-in-js
React Promise
a react.js hook for general promise in typescript
Stars: ✭ 90 (-8.16%)
Mutual labels:  react-component
Css Constructor
💄 CSS constructor for React components
Stars: ✭ 97 (-1.02%)
Mutual labels:  css-in-js

CSS via Components

A single React component to inject CSS with ease.
It works with SSR (even using React 16's renderToNodeStream) and client-side rendering out-of-the-box.
It also provides an optional optimisation path.

TravisCI Test Coverage npm version npm downloads dependencies

Support Me

If you're using Robin Frischmann's packages, please consider supporting his Open Source Work on Patreon.

Installation

# yarn
yarn add react-css-component

# npm
npm i --save react-css-component

Caution: It requires react and prop-types to be present.

Why?

This package was created as a possible solution to a question by Kent C. Dodds.
Creating resuable React components in general is pretty easy, but adding styling is not. The simplest way is to just use inline style, which works pretty well for many basic components. Yet, it is very limited. Neither do we have have pseudo classes nor do we have media queries.
So, at some point, we need actual CSS. We could include a CSS file, but that would require an additional build step e.g. using Webpack in combination with its css-loader. While this would work, it's not very compelling to enforce a certain build tool, just to use a single component.
Alright, how about CSS in JS? Using plain JavaScript to style the component sounds great, as the component is written in JavaScript anyways. But, most CSS in JS solutions are way to big to depend on. They're built for applications, not for independent reusable components. Yet, we can still benefit from writing our CSS in JavaScript. This package is the attempt to provide the smallest universal solution for inlining CSS in JavaScript possible.

How?

Depending on whether universal rendering (server-side rendering with client-side rehydration) or client-side only rendering is used, the implementation uses a different logic.

Universal Rendering

Server Rendering: The UniversalStyle component renders a primitive style DOM element that uses dangerouslySetInnerHTML to inject a CSS string.
Client Rehydration: At first, the UniversalStyle component just gets rehydrated to match the server-side markup. But, as soon as it is about to unmount, the style element is copied to the document.head once. This will ensure it's existence just in case any other component using it's CSS is still visible.

Caveat

During server-side rendering, the UniversalStyle component is not able to track it's own occurence, which may result in duplicate style elements. This won't break anything, but also is not optimal. To ensure that each UniversalStyle instance is only rendered once, we need an unique cache on every render. This is achieved by passing a simple cache via React's context feature. Check the StyleCacheProvider component for more information.

Client-Only Rendering

If we only render on the client-side anyways, we can skip that complex flow and just use the ClientStyle.
It simply injects a style element into the document.head on instantiation and tracks its occurence using a global cache.

Note: The ClientStyle component won't throw with server-side rendering, but it simply doesn't render styles.

When?

It is important to point out, that this component does not fit for every use case.
It is especially built to be used for resuable shared components: If you're building a small React component and want to share it on npm, this is the perfect solution to add styling without having any additional setup on the user-side.
But, it should be used with caution when building applications. It does not solve common CSS problems such as specificity issues, global namespace conflicts or autoprefixing. Consider using a CSS in JS library, CSS Modules or whatever tool is actually built with full applications in mind.

Style

This component is the core component and is used to inject the CSS.
Both the universal and the client-only version share the exact same API.

Props

Parameter Type  Description
css (string)  A CSS string that is rendered

Import

// universal rendering
import { UniversalStyle as Style } from 'react-css-component'

// client-only rendering
import { ClientStyle as Style } from 'react-css-component'

Example

const css = `
  .button {
    background-color: darkblue;
    padding: 20px 10px;
    font-size: 16px;
    color: white
  }

  .button:hover {
    background-color: blue
  }
`

// return an array to colocate style and the button
const Button = () => [
  <Style css={css} />
  <button className="button">Click Me!</button>
]

StyleCacheProvider

The StyleCacheProvider is used to prevent duplication. It is not required, but recommended.
It should wrap your whole application and is only required once, no matter how many components use the Style component.
It does not alter the resulting DOM structure as it simply renders its children.
It passes an empty cache object via React's context feature.

Tip: If you're using the UniversalStyle component for a reusable shared component, make sure to inform your users about the caveat of not using this component.

Example

import { StyleCacheProvider } from 'react-css-component'

const App = () => (
  <StyleCacheProvider>
    <Button />
  </StyleCacheProvider>
)

License

react-css-component is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].