A declarative, elegant responsive design approach for React using styled-components — built with just 18 lines of code.

Motivation

The traditional approach of managing separate class names and global CSS rulesets for responsive design is cumbersome and error-prone. Inspired by the styled-components community, this article demonstrates building custom responsive utilities with minimal code.

API Design

The ideal API progression starts with basic breakpoint-driven styling and evolves toward more sophisticated patterns:

• Components that respond to breakpoint conditions
• Eliminating manual prop passing through breakpoints defined at configuration time
• Programmatic component creation supporting conditions like "small only" or "medium and greater"
• Flexible style rule application beyond simple display toggling

Implementation

The core makeResponsiveComponent function accepts parameters and returns a styled component. Supporting functions include:

• buildStyles: Reduces an array of breakpoint-style pairs into a media query string
• hideAt: Syntactic sugar converting arguments to the expected format
• Breakpoint component: A consumer-friendly wrapper enabling JSX-style usage

The implementation leverages JavaScript's reduce function for efficient style string construction.

Updates

January 2018: The facepaint library for Emotion implements similar concepts with additional features.

May 2022: Chakra UI's responsive array syntax represents the best API for responsive styling, while the pattern described here remains valuable for scenarios lacking such abstractions.