Skip to main content

React Beyond

Supercharge React beyond component boundaries

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>
    </>
  )
}

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

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

// 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>
  ])
}
// 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>
  ])
}
// 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>
  )
}

import { store } from './store'

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

// 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>
  )
}

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.