Scopes

React Beyond doesn't add any global mechanism to the page. It strictly operates within the subtree of the component it's applied to. (Scoping works with even HMR: if you have the same component in two different places, one with a Beyond component above it, and one without, and you change the component, React Fast Refresh will re-render them properly, re-applying the HOCs only to the component that needs it.)

import React from "react"
import ReactDOM from "react-dom/client"
import { Beyond } from "react-beyond"
import { classFor } from "@react-beyond/classfor"

import App from "./App"

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <div class="" /> {/* <--- Warning: Invalid DOM property `class`. */}
    <Beyond hocs={[classFor()]}>
      <App class="" /> {/* <--- ✅ */}
    </Beyond>
  </React.StrictMode>
);

This is great, but sadly TypeScript cannot be scoped. Read more about it in the next chapter.