React Beyond | React Beyond

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:

// Vue-like if/else directives
// to avoid "syntax disaster"

export default function App() {
  return (
    <>
      <button x-if={false}>Hello 1</button>
      <button x-else-if={false}>Hello 2</button>
      <button x-else>Hello 3</button>
    </>
  )
}

Open Sandbox

// Use `class` and `for` instead of `className` and `htmlFor`

export default function App() {
  return (
    <button class="bg-blue-500 text-white">
      Hello
    </button>
  )
}

Open Sandbox

// Transpose wrapper components
import Tooltip from './Tooltip'

export default function App() {
  return ([
    // Tooltip 'contains' the button? Counterintuitive hierarchy
    <Tooltip title="Hello">
      <button>Hover me 1</button>
    </Tooltip>,

    // Makes more sense, and easier to control it as a prop
    <button x-transpose={$ => <Tooltip title="Hello">{$}</Tooltip>}>
      Hover me 2
    </button>
  ])
}

Open Sandbox

// Use `<a href=` elements for SPA navigation
export default function App() {
  const navigate = (href) => {
    alert(`Navigating to ${href}`)
  }

  return ([
    // Instead of this...
    <a href="/link1" onClick={(e) => {
      e.preventDefault()
      navigate("/link1")
    }}>Link 1</a>,

    // ...you can do this
    <a href="/link2">Link 2</a>
  ])
}

Open Sandbox

// Automatic error fallback
export default function App() {
  // comment;me;out;
  return (
    <div className="flex flex-col gap-2">
      <button>Hello</button>
      <BadComponent />
    </div>
  )
}

function BadComponent() {
  comment;me;out;
  return (
    <button>Bad component 💀</button>
  )
}

Open Sandbox

import { store } from './store'

// Components are automatically wrapped with `observer()`
export default function App() {
  return (
    <button onClick={() => { store.counter++ }}>
      Counter {store.counter}
    </button>
  )
}

Open Sandbox

// Show RxJS stream values as React children
import { counter$, counterSubject } from './store'

export default function App() {
  return (
    <button onClick={() => { counterSubject.next(1) }}>
      Counter {counter$}
    </button>
  )
}

Open Sandbox

✓ 100% Pure React

No bundler plugins or other compilation-time tooling. React Beyond Features are simple higher-order components.

✓ TypeScript

Directives are typed, so Ctrl/Cmd + Click works just like on any other prop in your IDE.

✓ HMR / Fast Refresh / SSR

React Beyond supports Hot Module Replacement / React Fast Refresh; and SSR is not a problem as well.

Check out the Gallery 🖼️