@blocz/react-responsive v4

@blocz/react-responsive v4 was simply launched with the removing of some deprecated APIs. They’re <Match> and CSS-in-JS help. You may see the complete launch particulars right here: https://github.com/bloczjs/react-responsive/releases/tag/v4.0.0

Braking adjustments

No extra. <Match>

In v3, @blocz/react-responsive Uncovered a <Match> The part that was studying the props. solely And matchMedia in any of his kids. He was impressed. @attain/router of v1 <Router> The part can be utilized like this (from the earlier README.md):

import React from "react";
import { Match } from "@blocz/react-responsive";

const App = () => (
  <Match>
    <div solely="xs">xs</div>
    <div solely="sm">sm</div>
    <div solely="md">md</div>
    <div solely="sm lg">sm and lg</div>
    <div solely="xl">xl</div>
    <div>
      <div>
        <div>
          <div solely="smDown">nested smDown</div>
        </div>
      </div>
    </div>
    <div matchMedia="(min-width:768px) and (max-width:992px),(max-width:576px)">
      {"(min-width:768px) and (max-width:992px),(max-width:576px)"}
    </div>
  </Match>
);

There are 3 principal issues with this:

1. It must be used. React.Kids Manually crawl all the kids and wrap every of them solely or matchMedia To help in a <Solely> Element Downside: This API is taken into account legacy in React and even they point out it: :::warning(Pitfall) Utilizing kids is uncommon and might result in fragile code. See Widespread Options. :::
2. If a baby was a customized part utilizing one among these, you’d have a battle,
3. It isn’t suitable with TypeScript. The README mentions make it work with customized parts. However for normal HTML components, we needed to hack round. And this hack was injected into all of the initiatives relying on it @blocz/react-responsive These 2 props for all HTML components solely And matchMedia.

Additionally it wasn’t going to make an excellent DX as a result of it would not work with unfold props and related conditions.

So on this v4, we determined to drop this API totally, and push for both one as an alternative. <Solely> (Extra declarative than <Match>), or like Hicks useBreakpoint() (extra composable).

Eradicating CSS-in-JS help

At first, toJSON And toCSS was designed to work in a venture utilizing styletronand inside this venture, we needed to make it attainable to plug StyleTron into it. @blocz/react-responsive Breakpoints for responsive design.

However that was a very long time in the past, and rather a lot has modified since then:

• We stopped engaged on this web site, so we’ve much less direct incentive to construct these 2 collectively.
• Basically, CSS-in-JS fell by way of utilization, and specifically styletron,
• Our help for CSS-in-JS was not nice: it may be tailored to many use instances. toJSON Can work for any nest of objects, however toCSS Could not and we did not wish to have to take care of a CSS parser. And usually we did not wish to preserve all the brand new options of CSS or CSS-in-JS engines.

As well as, this layer of connection between @blocz/react-responsive And CSS-in-JS can nonetheless be replicated utilizing useBreakpoint() And customized wrappers in person land.

All these causes result in full elimination of each. toJSON And toCSS.

Different adjustments

19. React to help.

This v4 formally provides help for React 19. Even when technically it was already suitable and you might use v3, you might need warnings together with your bundle managers. Additionally we’ve added checks for React 19.

Node model

This could not have an effect on any customers as it’s largely for our inner tooling: we upgraded the supported Node.js variations to twenty and 22 (at the moment LTS), and help for all different variations. left

Bundle measurement

With the elimination of toJSON, toCSSand <Match>we have been in a position to scale back the bundle measurement (in response to Bundlephobia) from 3.8kB in v3.0.3 to 2.7kB in v4.0.0 minified (and 1.3kB gzipped from 1.7kB).

This was not a purpose, however we all the time respect minimizing the influence on our finish customers.