Atomic Layout
  • Introduction
  • Motivation
  • Resources
  • FAQ
    • Comparison with styled-system
  • Getting started
    • Installation
    • First composition
    • Responsive composition
    • Nested composition
  • Fundamentals
    • Breakpoints
    • Prop aliases
    • Responsive props
  • API
    • Layout
      • configure()
    • Components
      • Box
      • Composition
      • Only
      • Visible
    • Hooks
      • useMediaQuery
      • useResponsiveQuery
      • useViewportChange
      • useBreakpointChange
      • useResponsiveValue
      • useResponsiveProps
    • Utilities
      • query
      • makeResponsive
  • Recipes
    • Semantics
    • Namespaces
    • Iterative areas
    • Responsive layout
    • Explicit media query
Powered by GitBook
On this page
  • Specification
  • Definition
  • Example
  1. API
  2. Hooks

useResponsiveProps

PrevioususeResponsiveValueNextUtilities

Last updated 5 years ago

Specification

The hook adds support to any React component by proxying given props based on the current viewport dimensions.

Accepts an Object of responsive props and returns an Object of pure props relevant to the current viewport. Breakpoint name and behavior is stripped out from the pure props.

Definition

type UseResponsiveProps<Props> = (props: Props) => Partial<Props>

Example

import React from 'react'
import { useResponsiveProps } from 'atomic-layout'

export const Avatar = (props) => {
  const { url } = useResponsiveProps(props)
  
  return <img src={url} />
}

Now the created Avatar component supports a url prop as a responsive prop:

<Avatar
  url="https://backend.dev/avatar/100x100"
  urlMd="https://backend.dev/avatar/250x250"
  urlLg="https://backend.dev/avatar/500x500" />
Responsive props