React Beyond is a higher-order higher-order component. It lets you define higher-order components which recursively re-apply themselves on the child components. You can create features that are available to the entire descendant tree. It opens up new exciting possibilities in React to create more intuitive code. Here are a few examples:
// Use `class` and `for` instead of `className` and `htmlFor`exportdefaultfunctionApp(){return(<buttonclass="bg-blue-500 text-white">
Hello
</button>)}
// Transpose wrapper componentsimportTooltipfrom'./Tooltip'exportdefaultfunctionApp(){return([// Tooltip 'contains' the button? Counterintuitive hierarchy<Tooltiptitle="Hello"><button>Hover me 1</button></Tooltip>,// Makes more sense, and easier to control it as a prop<buttonx-transpose={$=><Tooltiptitle="Hello">{$}</Tooltip>}>
Hover me 2
</button>])}
// Use `<a href=` elements for SPA navigationexportdefaultfunctionApp(){constnavigate = (href)=>{alert(`Navigating to ${href}`)}return([// Instead of this...<ahref="/link1"onClick={(e)=>{e.preventDefault()navigate("/link1")}}>Link 1</a>,// ...you can do this<ahref="/link2">Link 2</a>])}
import{store}from'./store'// Components are automatically wrapped with `observer()`exportdefaultfunctionApp(){return(<buttononClick={()=>{store.counter++ }}>
Counter {store.counter}</button>)}
// Show RxJS stream values as React childrenimport{counter$,counterSubject}from'./store'exportdefaultfunctionApp(){return(<buttononClick={()=>{counterSubject.next(1)}}>
Counter {counter$}</button>)}