How to use @artsy/detect-responsive-traits - 2 common examples
To help you get started, we’ve selected a few @artsy/detect-responsive-traits examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
artsy / fresnel / examples / kitchen-sink / src / server.tsx View on Github 
function onlyMatchListForUserAgent(userAgent: string): OnlyMatchList {
const device = findDevice(userAgent)
if (!device) {
log(userAgent)
return undefined
} else {
const supportsHover = device.touch ? "notHover" : "hover"
const onlyMatch: any = device.resizable
? [
supportsHover,
...(findBreakpointsForWidths(device.minWidth, device.maxWidth) as []),
]
: [
supportsHover,
findBreakpointAtWidth(device.minWidth),
findBreakpointAtWidth(device.maxWidth),
]
log(userAgent, onlyMatch, device.description)export function matchingMediaQueriesForUserAgent(
userAgent: string
): MatchingMediaQueries {
const device = findDevice(userAgent)
if (!device) {
return undefined
} else {
const supportsHover = device.touch ? "notHover" : "hover"
const onlyMatch: MatchingMediaQueries = device.resizable
? [
supportsHover,
...findBreakpointsForWidths(device.minWidth, device.maxWidth),
]
: [
supportsHover,
findBreakpointAtWidth(device.minWidth),
findBreakpointAtWidth(device.maxWidth),
]
return onlyMatch
}@artsy/detect-responsive-traits
Get responsive size traits from a user agent
