Adds "useCurrentBreakpoints" hook

examples/hooks/UseCurrentBreakpoints.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { useCurrentBreakpoints } from 'atomic-layout'
+
+const UseCurrentBreakpointsScenario = () => {
+  const breakpoints = useCurrentBreakpoints()
+
+  return (
+    <p>
+      Current breakpoint:{' '}
+      <span data-test-id="current-breakpoints">{breakpoints.join()}</span>
+    </p>
+  )
+}
+
+export default UseCurrentBreakpointsScenario

examples/hooks/useCurrentBreakpoints.test.js

@@ -0,0 +1,29 @@
+describe('useCurrentBreakpoints', () => {
+  before(() => {
+    cy.loadStory(['hooks'], ['usecurrentbreakpoints'])
+  })
+
+  it('Returns the default breakpoint on initial render', () => {
+    cy.get('[data-test-id="current-breakpoints"]').should('have.text', 'xs')
+  })
+
+  it('Returns "sm" breakpoint name on "sm" breakpoint', () => {
+    cy.setBreakpoint('sm')
+    cy.get('[data-test-id="current-breakpoints"]').should('have.text', 'sm')
+  })
+
+  it('Returns "md" breakpoint name on "md" breakpoint', () => {
+    cy.setBreakpoint('md')
+    cy.get('[data-test-id="current-breakpoints"]').should('have.text', 'md')
+  })
+
+  it('Returns "lg" breakpoint name on "lg" breakpoint', () => {
+    cy.setBreakpoint('lg')
+    cy.get('[data-test-id="current-breakpoints"]').should('have.text', 'lg')
+  })
+
+  it('Returns "xl" breakpoint name on "xl" breakpoint', () => {
+    cy.setBreakpoint('xl')
+    cy.get('[data-test-id="current-breakpoints"]').should('have.text', 'xl')
+  })
+})

examples/index.js

@@ -93,13 +93,15 @@ storiesOf('Components|Visible', module).add(
 import UseViewportChange from './hooks/UseViewportChange'
 import UseResponsiveValue from './hooks/UseResponsiveValue'
 import UseBreakpointChange from './hooks/UseBreakpointChange'
+import UseCurrentBreakpoints from './hooks/UseCurrentBreakpoints'
 import UseResponsiveProps from './hooks/UseResponsiveProps'
 import UseResponsiveComponent from './hooks/UseResponsiveComponent'
 
 storiesOf('Hooks', module)
   .add('useViewportChange', () => <UseViewportChange />)
   .add('useResponsiveValue', () => <UseResponsiveValue />)
   .add('useBreakpointChange', () => <UseBreakpointChange />)
+  .add('useCurrentBreakpoints', () => <UseCurrentBreakpoints />)
   .add('useResponsiveProps', () => <UseResponsiveProps />)
   .add('useResponsiveComponent', () => <UseResponsiveComponent />)
 

packages/atomic-layout-emotion/src/index.ts

@@ -11,6 +11,7 @@ export {
   useMediaQuery,
   useViewportChange,
   useBreakpointChange,
+  useCurrentBreakpoints,
   useResponsiveValue,
   useResponsiveProps,
   useResponsiveComponent,

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

@@ -0,0 +1,33 @@
+import { useState } from 'react'
+import useViewportChange from './useViewportChange'
+import { Layout, createMediaQuery } from '@atomic-layout/core'
+
+/**
+ * Returns a list of breakpoints that match the current state of the viewport.
+ */
+export default function useCurrentBreakpoints(): string[] {
+  const [currentBreakpoints, setCurrentBreakpoints] = useState<string[]>([
+    Layout.defaultBreakpointName,
+  ])
+
+  useViewportChange(() => {
+    const matchingBreakpoints = Object.keys(Layout.breakpoints).filter(
+      (breakpointName) => {
+        const mediaQueryObject = Layout.breakpoints[breakpointName]
+        /**
+         * @fixme Move the media query composition and matching logic
+         * into the `Layout` class.
+         * @reason It's expensive and redundant to compose strings from
+         * breakpoints on each viewport change. Breakpoints never change
+         * on runtime.
+         */
+        const mediaQuery = createMediaQuery(mediaQueryObject, 'only')
+        return matchMedia(mediaQuery).matches
+      },
+    )
+
+    setCurrentBreakpoints(matchingBreakpoints)
+  })
+
+  return currentBreakpoints
+}

packages/atomic-layout/src/index.ts

@@ -11,6 +11,7 @@ export { default as Visible } from './components/Visible'
 export { useMediaQuery } from './hooks/useMediaQuery'
 export { default as useViewportChange } from './hooks/useViewportChange'
 export { default as useBreakpointChange } from './hooks/useBreakpointChange'
+export { default as useCurrentBreakpoints } from './hooks/useCurrentBreakpoints'
 export { default as useResponsiveValue } from './hooks/useResponsiveValue'
 export { default as useResponsiveProps } from './hooks/useResponsiveProps'
 export { default as useResponsiveComponent } from './hooks/useResponsiveComponent'