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

[MyrinNew]

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










⚡ 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;










🎯 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 1div>
div mod="col$[20%] || lg? col$[40%]">Block 2div>
...
div>







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>







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>










🚀 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


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




More...