ViewportProvider

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

<ViewportProvider>{/* content requiring viewport size */}</ViewportProvider>

Introduction

import { ViewportProvider } from '@telus-uds/components-base'

Guidance

info

ViewportProvider is automatically included in BaseProvider. You don't need to include ViewportProvider in your app separately if you are already using BaseProvider.

ViewportProvider provides a react, cross platform API onto user viewport size. This can be accessed with the useViewport hook. The viewport returned will be one of xs, sm, md, lg, xl corresponding to the system viewports.

import { useViewport } from '@telus-uds/components-base'
// ...
const viewport = useViewport()

useResponsiveProp

You can use useResponsiveProp hook to create values that change depending on the current viewport. This hook takes any value and, if that value is a responsive prop (an object with one or more keys matching system viewport names), returns the value corresponding to the largest viewport key smaller than the current screen's viewport.

For example, if passed { sm: 4, lg: 8 }, it will return 8 on xl and lg viewports, 4 on md and sm viewports, and undefined (or a provided defaultValue) on xs viewports.

import { useViewport } from '@telus-uds/components-base'
// ...
const viewport = useViewport({ sm: 4, lg: 8 })

Props

Name	Type	Default	Description
children*	node

```