Usage Patterns

Multiple features

Beyond Features can be applied anywhere, and they can be nested. After all, they're just higher-order components. But JavaScript doesn't provide a nice way to apply a series of functions to a value:

// 🥴
const WrappedApp =
  errorFallback()(
    ifElse()(
      loader()(
        classFor()(
          App
        )
      )
    )
  )

To ease on this pain, React Beyond exports a Beyond component which takes a list of features and applies them in order:

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

Note that the application order matters. Beyond takes the features in the order of application, so it looks reversed from the nested syntax.

In React DevTools, you can see the applied HOCs as a label next to the component, indicating the application order from left to right: