useResponsiveProps

Search…

useResponsiveProps

Specification
The hook adds Responsive props 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
1
type UseResponsiveProps<Props> = (props: Props) => Partial<Props>
Copied!
Example
1
import React from 'react'
2
import { useResponsiveProps } from 'atomic-layout'
3
​
4
export const Avatar = (props) => {
5
  const { url } = useResponsiveProps(props)
6
  
7
  return <img src={url} />
8
}
Copied!
Now the created Avatar component supports a url prop as a responsive prop:
1
<Avatar
2
  url="https://backend.dev/avatar/100x100"
3
  urlMd="https://backend.dev/avatar/250x250"
4
  urlLg="https://backend.dev/avatar/500x500" />
Copied!

useResponsiveValue

Next - API

Utilities

Last modified 1yr ago

Copy link

Contents

Specification

Definition

Example