Skip to content

Releases: ehellman/react-breakpoints

3.0.0

18 Jun 08:42
4b4a0cf
Compare
Choose a tag to compare

New feature: snapMode

Enabled by default, returns breakpoints, containing breakpoints.current via context. Allowing you to do:

{
  breakpoints[breakpoints.current] > breakpoints.tabletLandscape 
    ? <DesktopComp />
    : <TouchComp />
}

If snapMode is false, the old behaviour with screenWidth and breakpoints is passed down, but this is not recommended since it will cause a lot of re-renders if the resize event occurs often.

New feature: Media component (renderProps)

The Media component exposes the Consumer to allow usage with renderProps pattern.

import { Media } from 'react-breakpoints'
<Media>
  {({ breakpoints, currentBreakpoint }) => 
    breakpoints[currentBreakpoint] > breakpoints.tabletLandscape 
      ? <DesktopComp />
      : <TouchComp />
  }
</Media>

Example project

Added example project that shows setup and usage of both render props and HOC.

withBreakpoints: new prop

withBreakpoints HOC now adds breakpoints: object and currentBreakpoint: string, where currentBreakpoint is oneOf(Object.keys(breakpoints))

Old context API is gone

Removed getChildContext(), but added polyfill so it still works in older projects.

forwardRef on HOC (#8)

withBreakpoints now uses forwardRef if it is available, avoiding errors for users that use React.createRef together with the HOC.

Prettier & git hooks

Project now uses Prettier for code formatting.

General cleanup

  • Fixed double render bug