> For the complete documentation index, see [llms.txt](https://redd.gitbook.io/atomic-layout/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://redd.gitbook.io/atomic-layout/api/hooks/use-responsive-value.md).

# 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

```typescript
type useResponsiveValue<T> = (
  breakpoints: Record<string, T>,
  defaultValue?: T,
)
```

## Example

```jsx
import React from 'react'
import { useResponsiveValue } from 'atomic-layout'

export const ReadTime = ({ duration }) => {
  // Truncate a label caption based on the viewport
  const caption = useResponsiveValue(
    {
      // Use contraction on extra-small devices
      xs: 'min.',
    },
    // On all other breakpoints use the full label
    'minutes(s)'
  )
  
  return <p>Reading duration: {duration} {caption}</p>
})
```