Hooks

React Hooks utility of xstyled.

xstyled includes powerful Hooks to make it easy to use utilities outside x or styled.

Theme utilities

useTheme

Get the current theme.

import { useTheme } from '@xstyled/...'

function Example() {
  const theme = useTheme()
  return <div style={{ color: theme.colors.primary }}>Primary</div>
}

useTh

Get a value from theme.

import { useTh } from '@xstyled/...'

function Example() {
  const primary = useTh('colors.primary')
  return <div style={{ color: primary }}>Primary</div>
}

Theme getter Hooks

All theme getters have their own hooks, for example, get a color using useColor:

import { useColor } from '@xstyled/...'

function Example() {
  const primary = useColor('primary')
  return <div style={{ color: primary }}>Primary</div>
}

Available getter hooks

Responsive utilities

useBreakpoints

Return breakpoints defined in the theme (or the default breakpoints).

import { useBreakpoints } from '@xstyled/...'

function Example() {
  const breakpoints = useBreakpoints()
  return <div style={{ maxWidth: breakpoints.md }} />
}

useViewportWidth

Return the width of the viewport.

import { useViewportWidth } from '@xstyled/...'

function Example() {
  const width = useViewportWidth()
  return <div style={{ width }} />
}

useBreakpoint

Return the current breakpoint (based on viewport width).

import { useBreakpoint } from '@xstyled/...'

function Example() {
  const breakpoint = useBreakpoint()
  return <div>We are on {breakpoint}</div>
}

useUp

Return true if the viewport width is greater than the specified breakpoint.

import { useUp } from '@xstyled/...'

function Example() {
  const upMd = useUp('md')
  return upMd ? 'Desktop' : 'Mobile'
}

useDown

Return true if the viewport width is lower than the specified breakpoint.

import { useDown } from '@xstyled/...'

function Example() {
  const downMd = useDown('md')
  return downMd ? 'Mobile' : 'Desktop'
}