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