Skip to main content

Getting Started

1. Install the core package

npm install react-beyond

import { Beyond } from "react-beyond"

import App from "./App"

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Beyond hocs={[
      classFor(),
      ifElse(),
      transpose()
    ]}>
      <App />
    </Beyond>
  </React.StrictMode>
);

3. Add the Vite plugin to support hot module replacement.

If you're using Vite, add the react-beyond/plugin/vite plugin to your Vite config:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import reactBeyond from 'react-beyond/plugin/vite'

export default defineConfig({
  plugins: [react(), reactBeyond()]
})

Note: reactBeyond() must be added after react().

You're good to go now.

How HMR works

HMR (Hot Module Replacement) is a feature that allows you to change your code and see the changes in the browser without reloading the page. When you change a file, React Refresh looks up the component by the previous reference in the tree and updates them. But because Beyond features are wrapping all the components, React Refresh can't find the original component within the tree, and therefore nothing happens.

React Beyond, when a feature is applied to a component, registers the new component in React Refresh with an amended ID string, containing the feature chain applied to the base component. When an HMR update occurs, it re-applies the feature HOCs to the new component and registers it again.