ThemeProvider

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

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

Package version

1.6.1

<ThemeProvider>{/* themed UDS Base components*/}</ThemeProvider>

Introduction

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

Guidance

info

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

ThemeProvider makes a UDS theme available in React context for UDS Base components to consume.

Theme switching

info

coming soon!

Spacing scale

ThemeProvider exposes the (12 stop) spacing scale corresponding to the UDS theme passed via the useSizingScale hook

Loading...

function SizingScale() { const Scale = ({ index }) => { const value = useSpacingScale(index) return ( <div> {index} / {value}px </div> ) } return ( <div> {Array.apply(null, Array(12)).map((_, i) => ( <Scale index={i} key={i} /> ))} </div> ) }

function SizingScale() {
  const Scale = ({ index }) => {
    const value = useSpacingScale(index)
    return (
      <div>
        {index} / {value}px
      </div>
    )
  }

  return (
    <div>
      {Array.apply(null, Array(12)).map((_, i) => (
        <Scale index={i} key={i} />
      ))}
    </div>
  )
}

Props

Name	Type	Default	Description
children*	node
defaultTheme*	shape