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

HookTheme key
useAnimationanimations
useBorderborders
useBorderStyleborderStyles
useBorderWidthborderWidths
useColorcolors
useFontfonts
useFontSizefontSizes
useFontWeightfontWeights
useInsetinset
useLetterSpacingletterSpacings
useLineHeightlineHeights
useRadiusradii
useShadowshadows
useSizesizes
useSpacespace
useTimingFunctionstimingFunctions
useTransformtransforms
useTransitiontransitions
useTransitionPropertytransitionProperties
useZIndexzIndices

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' }
Edit this page on GitHub