Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

February 18, 2021 08:29 am GMT

The tiniest CSS-in-JS solution for your open-source React components

Hey there! My name is Vlad and I'm fascinated by the development of JavaScript micro-libraries. My primary projects at the moment are:

react-colorful the tiniest and fastest color picker component for React and Preact apps (14 times lighter than react-color)
wouter a minimalist-friendly 1.3KB routing solution for React and Preact
omgopass a tiny 0.3 KB and ultra-fast memorable password generator (600 times faster than password-generator)

react-colorful is the only project that ships both JS and CSS. I want to share with you the challenges we encountered while developing it. You might find our experience useful in making your open-source React components lighter.

Problem

Since its first release, react-colorful has included a CSS file that developers have to import:

import { HexColorPicker } from "react-colorful";import "react-colorful/dist/index.css"; //  this one

Enter fullscreen mode Exit fullscreen mode

In terms of bundle size, everything was super cool because we wrote all styles as CSS files that were then compressed and minified by a bundling tool.

It seemed like a good solution, but we've started receiving complaints from many developers that were unable to use the styles. It is quite common in the React ecosystem to use libraries like Emotion, Styled-Components, or other CSS-in-JS libraries exclusively and to entirely forgo the inclusion of a style loader. As such, usage of react-colorful would necessitate the alteration of build configurations for these users to be able to access the default styling.

Moreover, many component libraries and UI kits are CSS-in-JS exclusive, so the CSS-only approach makes it difficult for the picker to be compatible.

Why not just use an existing CSS-in-JS solution?

In my last post, I mentioned that react-colorful aims to be a zero-dependency package and we didn't want to change that by adding a CSS-in-JS framework, such as Emotion.

The entirety of react-colorful costs about 2 KB, but installing emotion would make the size of the package almost 7 times bigger. Of course, there are tiny CSS-in-JS libraries like goober that cost about 1KB, but we didn't feel like we need the entire library since our styles are not dynamic.

Installing an extra dependency on other developers' projects does not seem justified to us.

The tiniest solution

In order to achieve our goals, we decided to find a simple way of injecting styles into the page just like how CSS-in-JS libraries do that.

I use Microbundle to build my open-source projects and love it a lot. It's a zero-configuration bundler for tiny modules, powered by Rollup.

Most bundlers, Microbundle included, save processed styles to the disk as a CSS file. Because we wanted to have the styles in JS, we asked Jason Miller, the author of Microbundle (amongst many other notable projects), to provide us with a way to import processed CSS as a string into JavaScript and he generously added a new option to Microbundle:

// with the default external CSS:import "./foo.css";  // generates a minified .css file in the output directory// with `microbundle --css inline`:import css from "./foo.css";console.log(css);  // the generated minified stylesheet string

Enter fullscreen mode Exit fullscreen mode

It is not necessary to use Microbundle; you can use any build tool that you'd like, just make sure to read up on the docs to configure it properly.

Then we created a simple hook that creates a <style> tag containing the styles for our component. As soon as the component renders the first time, this hook appends the tag to <head>.

import { useLayoutEffect } from "react"import styles from "../css/styles.css";let styleElement;const useStyleSheet = () => {  useLayoutEffect(() => {    if (typeof document !== "undefined" && !styleElement) {      styleElement = document.head.appendChild(document.createElement("style"));      styleElement.innerHTML = styles;    }  }, []);};

Enter fullscreen mode Exit fullscreen mode

Results

Since it no longer requires importing CSS separately, the usage of the react-colorful became much simpler. Now the component can be used with any CSS-in-JS project or component library.

The hook's gzipped size is about 150 bytes, and I suspect it's one of the smallest ways of shipping CSS for a React component.

Thanks for reading

We care about size, performance, and accessibility. I hope that the React community shares our values and will find react-colorful useful for further projects.

It will help us a lot if you star the repo on GitHub or share the link to this article with your friends

omgovich / react-colorful

A tiny (2,5 KB) color picker component for React and Preact apps

react-colorful is a tiny color picker component for React and Preact apps

Features

Small: Just 2,5 KB gzipped (14 times lighter than react-color).
Tree-shakeable: Only the parts you use will be imported into your app's bundle.
Fast: Built with hooks and functional components only.
Bulletproof: Written in strict TypeScript and covered by 40+ tests.
Simple: The interface is straight forward and easy to use.
Mobile-friendly: Works well on mobile devices and touch screens.
Accessible: Follows the WAI-ARIA guidelines to support users of assistive technologies.
No dependencies

Live demos

Install

npm install react-colorful --save

Usage

import { HexColorPicker } from "react-colorful";const YourComponent = () => {  const [color, setColor] = useState("#aabbcc");  return <HexColorPicker color={color} onChange={setColor}

Enter fullscreen mode Exit fullscreen mode

View on GitHub

Original Link: https://dev.to/omgovich/the-tiniest-css-in-js-solution-for-your-open-source-react-components-1o94

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To