Styled Utilities

@xstyled/styled-components and @xstyled/emotion expose some useful utilities to enhance your styling experience.

useTheme

Return the current theme.

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

useBreakpoints

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

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

useViewportWidth

Return the width of the viewport.

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

useBreakpoint

Return the current breakpoint (based on viewport width).

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.

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

useDown

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

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