hrefHandler

Turns all <a href> elements into SPA links with a navigate callback.

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

Installation

npm install react-beyond @react-beyond/hrefhandler

Usage

import { Beyond } from 'react-beyond'
import { classFor } from '@react-beyond/hrefhandler'

<Beyond features={[hrefHandler({
  navigate: (href) => {
    alert(`Navigating to ${href} with React Beyond`)
  }
})]}>
  <App />
</Beyond>

Options

• id - The id of the feature HOC. Defaults to "hrefHandler".
• navigate: (href: string) => void - This function will be called when the user clicks on a link.
• onlyRelative?: boolean - If true, it will only handle relative links. Defaults to true.