✨ Features

• 📏 Smart scaling: width, height, and font scaling tailored to device types
• 🔁 Live device orientation and dimension detection with a hook
• 🔍 Device awareness: phone/tablet detection, notch presence, aspect ratios
• ⚖️ Moderated scaling with factor customization
• 🧠 Intelligent font scaling with accessibility support
• ⚡ Minimal dependencies, plug-and-play setup

📦 Installation

npm install responsive-csx


yarn add responsive-csx


pnpm add responsive-csx

🔧 Usage

The rs object provides quick access to commonly used utilities:

📏 Scaling functions:

| Function | Description | Equivalent import | | --------- | ----------------------------------------- | ----------------- | | rs.s() | Width-based scale (padding, margin, etc.) | scale() | | rs.vs() | Height-based scale (vertical spacing) | verticalScale() | | rs.ms() | Moderated scale with customizable factor | moderateScale() | | rs.fs() | Font scaling based on screen/pixel ratio | scaleFontSize() |

import { rs } from 'responsive-csx';

const styles = StyleSheet.create({
  container: {
    padding: rs.s(16),       // Width-based scaling
    marginVertical: rs.vs(8), // Height-based scaling
  },
  title: {
    fontSize: rs.fs(18),     // Font scaling
  },
});

🔒 Clamp Options

Each function supports optional clamp:

rs.s(16, { min: 12 });           // Clamp only min
rs.s(16, { max: 20 });           // Clamp only max
rs.s(16, { min: 12, max: 20 });  // Clamp both ends

rs.fs(18, { min: 14 });          // Safe minimum font size
rs.ms(22, { max: 26 });          // Moderated with upper bound

✔️ You can pass clamp as the second parameter to restrict the result within a range:

rs.s(value, {
  min?: number,
  max?: number,
});

📱 Device info:

rs.device

| Property | Description | | --------------- | -------------------------------- | | screenWidth | Current screen width (dp) | | screenHeight | Current screen height (dp) | | isTablet | Whether the device is a tablet | | aspectRatio | Screen aspect ratio | | isSmallDevice | Is width ≤ 360 | | baseUnit | Internal base unit based on type | | deviceType | 'phone' | 'tablet' | 'unknown' |

import { rs } from 'responsive-csx';

if (rs.device.isTablet) {
  console.log('Tablet detected!');
}

🔁 Hooks:

| Hook | Description | | -------------------- | ------------------------------------------------------- | | rs.useDimensions() | React hook to get responsive dimensions and orientation |

import { rs } from 'responsive-csx';

const ResponsiveComponent = () => {
  const { isLandscape, screenHeight } = rs.useDimensions();

  return (
    <View style={{ padding: rs.s(10) }}>
      <Text style={{ fontSize: rs.fs(16) }}>
        Orientation: {isLandscape ? 'Landscape' : 'Portrait'} – Height: {screenHeight}
      </Text>
    </View>
  );
};

🧪 Device Internals

Behind the scenes, we calculate:

• 📐 Aspect ratio
• 📏 Diagonal inches
• 📱 Type (small/large phone or tablet)
• 🎯 Base unit per device
• 📊 Pixel & font scaling

📜 License

MIT © KJ-GM