v3.0.1

3.0.1

• Fix exports field in package.json
  • use correct lib/ folder instead of dist/
  • Use proper .mjs for node
• Drop support for node 13

v3.0.0

• The package was renamed @blocz/react-responsive instead of react-only
• rename useOnly to useBreakpoint and useQuery to useMediaQuery BREAKING CHANGE
  • Those were renamed for 2 reasons:
    1. useOnly isn’t really explicit
    2. useQuery can be confused with react-query’s or apollo’s useQuery hooks
• useBreakpoint and useMediaQuery stop returning undefined during the initialization and if the media query is invalid. Instead it will directly use the correct value, and if the media query is invalid, it’ll return false. BREAKING CHANGE
• Bump peerDependencies to allow for react 17
• Drop support for node 10
• Remove prop strict BREAKING CHANGE:
  • This feature was initially introduced to avoid collision between mdUp and smDown for instance. But since we avoid the overlapping of breakpoints in the v1.0.1 and as this is customizable, this prop doesn't make sense anymore.
  • This prop relied on calc(% + 1px) and calc(% - 1px) which has 2 issues:
    • difficult to be compatible with SSR as for instance css-mediaquery crashes when we use calc() (see issue),
    • 1px is really arbitrary and not customizable so anyway if someone wanted to change that, they had to use custom breakpoints.
• Fix only and matchMedia props on DOM elements for the Match component
  • Inject MatchChildProps in HTMLAttributes from the global namespace React

v2.3.3

• remove wrong dependency on emotion

v2.3.2

• add toJSON and toCSS for CSS-in-JS support

v2.3.1

• Use Node 13 conditional exports: https://nodejs.org/api/esm.html#esm_conditional_exports

v2.3.0

• remove polyfill for matchMedia (it should be define by the users) minor breaking change
• add new hook useQuery and use it internally in Only for the prop matchMedia
• drop query in useOnly BREAKING CHANGE
  • as there is a new hook useQuery that deals with media queries, the 2nd argument of useOnly was redundant
  • new signature:
    • before: useOnly = (on?: string, media?: string, strict?: boolean) => boolean | undefined
    • after: useOnly = (on?: string, strict?: boolean) => boolean | undefined
  • as on and media were join with a or, you can still mimic the previous behavior by doing:
    • before:

      const isVisible = useOnly(on, media, strict);

    • after:

      const a = useOnly(on, strict);
      const b = useQuery(media);
      const isVisible = a || b;

v2.2.0

• the 3rd option of every breakpoint is instead of a unit string, a string representing the unit or an object with two keys:
  • unit as before ("px", "em", ...)
  • direction "width" or "height"

v2.1.4

• expose MatchChildProps

v2.1.3

• re-use useLayoutEffect to reduce delay between initialization and true values