useResponsiveValue

Search…

useResponsiveValue

Specification
Returns a value based on the given breakpoint-value pairs. Whenever viewport matches a given breakpoint, its associated value is returned.  Returns the default value, if any, when no breakpoints are matched.
Definition
1
type useResponsiveValue<T> = (
2
  breakpoints: Record<string, T>,
3
  defaultValue?: T,
4
)
Copied!
Example
1
import React from 'react'
2
import { useResponsiveValue } from 'atomic-layout'
3
​
4
export const ReadTime = ({ duration }) => {
5
  // Truncate a label caption based on the viewport
6
  const caption = useResponsiveValue(
7
    {
8
      // Use contraction on extra-small devices
9
      xs: 'min.',
10
    },
11
    // On all other breakpoints use the full label
12
    'minutes(s)'
13
  )
14
  
15
  return <p>Reading duration: {duration} {caption}</p>
16
})
Copied!

useBreakpointChange

useResponsiveProps

Last modified 1yr ago

Copy link

Contents

Specification

Definition

Example