DEV Community

Cover image for MOD-CSS v4 — Now Fully Compatible with React (and Most Modern JS/TS Frameworks) 🚀
Dev Geos
Dev Geos

Posted on • Edited on

MOD-CSS v4 — Now Fully Compatible with React (and Most Modern JS/TS Frameworks) 🚀

#webdev #frontend #css #react

The brand-new MOD-CSS v4.x is here with some great news: it’s now fully compatible with React and most modern JavaScript/TypeScript frameworks.

In this article, I’ll show you how to integrate it effortlessly into your project and unleash its full potential to create fast, modular, and highly customizable interfaces.

📦 Quick Installation

Simply add MOD-CSS to your project via npm:

npm i @dev-geos/mod-css
Enter fullscreen mode Exit fullscreen mode

⚡ Integrating MOD-CSS into React

Integration is incredibly simple: just call the init() method once in your root component. MOD-CSS will then automatically apply your dynamic styles across all components inside it.

import React, { useCallback } from 'react';
import MODCSS from '@dev-geos/mod-css';

function MainComponent() {
  const init = useCallback((node) => {
    if (node) {
      const MD = new MODCSS();
      MD.init();
    }
  }, []);

  return (
    <div className="grid" ref={init}>
      {/* Your content */}
    </div>
  );
}

export default MainComponent;
Enter fullscreen mode Exit fullscreen mode

🎯 The Two Key Attributes: mod / data-mod and var / data-var

With MOD-CSS, you only need two attributes to handle all your styling:

mod or data-mod — to apply predefined styles
var or data-var — to manage/edit your selectors

They are fully interchangeable, so you can use the data-* convention or keep it short for faster writing.

🛠️ A Few Examples

1️⃣ A Responsive flexgrid in few Line

<div mod="row$[100%]">
  <div mod="col$[80%] || lg? col$[60%]">Block 1</div>
  <div mod="col$[20%] || lg? col$[40%]">Block 2</div>
...
</div>
Enter fullscreen mode Exit fullscreen mode

2️⃣ Reactive Behavior Based on Screen Size

<div mod="w[100%] bg[blue] || lg? w[75%] || 2xl? w[50%] bg[pink]">
  {/* I change background and width depending on the screen size */}
</div>
Enter fullscreen mode Exit fullscreen mode

3️⃣ Easily Customize a Component

<Button mod="bg[lightblue] co[#333] br[9px] && focus*hover: co[blue] br[4px]">
  {/* Button (background, color, Radius 4px) */}
</Button>
Enter fullscreen mode Exit fullscreen mode

🚀 Why Choose MOD-CSS?

Ultra-lightweight — no unnecessary overhead

Minimal syntax — write less, do more

Highly customizable — built-in variables and reactive behavior

More than 200 properties - support most CSS properties

Fresh rendering - Your settings are deleted after rendering. Nothing appears on client side

Universal compatibility — works with React, Vue, Svelte, Angular, Vanilla JS…

Developers around the world have already adopted it !

In an upcoming article, I’ll dive into all the advanced MOD-CSS features that can supercharge your front-end projects.

See you soon 👋

Official website

Top comments (0)