Export a utility to compose inline @media queries about atomic-layout

[kettanaito]

Hey, @vitordino. Thank you for the insights.

Yes, indeed, this utility shouldn't be anything critical to implement. Especially, because there is an already published useResponsiveQuery React hook that accepts the "from/to" API, but instead of returning a media query string it returns a media query match (the hook is designed for conditional rendering):

atomic-layout/packages/atomic-layout/src/hooks/useResponsiveQuery.ts

Lines 101 to 109 in ba295c7

	const breakpointsList = useMemo(() => {
	const breakpoints = getBreakpoints(exactBreakpoint, from, to, except)
	if (!breakpoints) {
	return []
	}
	return [].concat(breakpoints).map(createMediaQuery)
	}, [exactBreakpoint, from, to, except])

The getBreakpoints() function converts "from/to" API into a list of media query Objects. Then that list is mapped with createMediaQuery, that converts a single media query Object into a string.

If this logic above is put into a separate function, then it could be reused in useResponsiveQuery, and exported standalone for the inline media query composition, as mentioned in the issue's description.

How would you call a hook that behaves like this? I'm thinking of naming it query:

import { query } from 'atomic-layout'

const MyComponent = styled.div`
  @media (${query({ from: 'sm', to: 'lg' }}) {
    font-size: 2rem;
  }
`

[vitordino]

i’ve did something similar on my etymos library, more specific a above util.. shouldn’t be so hard to adapt to this from/to behaviour — i had one of it, but as i usually only use above, i removed the between util at some point prior the release of the lib..

i did kept the useMediaQuery hook tho (supporting above and below options), and it was a render prop component before

it might help