React PushState Anchor
What is it?
React PushState Anchor provides three components for performing client-side push state navigation. There's no routing or complex state management. Just three components
<PushStateAnchorProvider />
Wrap your entire application or just the part of the application you want to use pushState in.
<PushStateAnchor />
A replacement for <a>
tags that will use history.pushState
under the hood.
<A href='/home'>Home</A>
PushStateLocation />
If you're updating history, you'll probably want to know when it's been updated. Use PushStateLocation
component to get the current history location object, it'll update whenever a PushStateAnchor
is clicked.
A utitlity component that will provide the current history location using a render callback.
<PushStateLocation> { <h1>The current pathname is locationpathname</h1> )}</PushStateLocation>
Installation
Install from NPM, react-pushstate-anchor
requires the history
module as a peer dependency.
yarn add react-pushstate-anchor history
Usage
{ return <PushStateAnchorProvider> <h1>Push State Anchor</h1> <Psa href='/home'><button>Home</button></Psa> <Psa href='/about'><button>About</button></Psa> <Psa href='/careers'><button>Careers</button></Psa> <PushStateLocation> <h1>locationpathname</h1> </PushStateLocation> </PushStateAnchorProvider> }
react-pushstate-anchor
will render a simple <a>
anchor tag if JavaScript is unavailable.