Skills
.Work. You
Rest

react-utils/responsive-viewport-and-directionality

Official

Enhance responsive UI logic with element size, viewport state, and directionality.

Software Engineering#react#responsive design#hooks#ui development#viewport
Authornoaignite
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive set of hooks to handle responsive UI logic, including element size, viewport state, visual viewport metrics, media queries, and RTL support.

Core Features & Use Cases

  • Element Size Tracking: Use useElementSize to get the size of an element for layout adjustments.
  • Viewport State: Leverage useWindowSize and useVisualViewport for viewport dimensions and zoom awareness.
  • Media Queries: Apply useMediaQuery to dynamically change UI based on screen size.
  • RTL Support: Implement useRTL to detect and support right-to-left languages and layouts.
  • Use Case: For creating mobile-friendly web applications that adapt to various screen sizes and orientations.

Quick Start

Import the required hooks from the 'noaignite-react-utils' library and use them within your React component to handle responsive logic.

Dependency Matrix

Required Modules

react-utils

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: react-utils/responsive-viewport-and-directionality
Download link: https://github.com/noaignite/accelerator/archive/main.zip#react-utils-responsive-viewport-and-directionality

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.