https://github.com/shortlist-digital/react-pushstate-anchor

Anchor's that update the browser's location with PushState.
https://github.com/shortlist-digital/react-pushstate-anchor

Last synced: about 2 months ago
JSON representation

Anchor's that update the browser's location with PushState.

• Host: GitHub
• URL: https://github.com/shortlist-digital/react-pushstate-anchor
• Owner: shortlist-digital
• Created: 2018-04-08T19:45:06.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-01-29T11:56:18.000Z (almost 6 years ago)
• Last Synced: 2024-08-04T01:28:19.251Z (5 months ago)
• Language: JavaScript
• Size: 217 KB
• Stars: 23
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - react-pushstate-anchor - digital | 24 | (JavaScript)

README

        
# 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

![](https://i.imgur.com/e0DcnDS.gif)

### ``

Wrap your entire application or just the part of the application you want to use pushState in.

### ``

A replacement for `` tags that will use `history.pushState` under the hood.


```js

import { PushStateAnchor as A } from 'react-pushstate-anchor'

Home

```

### `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.

```js

import { PushStateLocaation } from 'react-pushstate-anchor'

  {location => {

    
The current pathname is {location.pathname}

  )}


```

## Installation

Install from NPM, `react-pushstate-anchor` requires the `history` module as a peer dependency.

`yarn add react-pushstate-anchor history`

## Usage

```js

import React, { Component } from 'react'

import { PushStateAnchorProvider, PushStateLocation, PushStateAnchor as Psa } from 'react-pushstate-anchor'

class App extends Component {

  render() {

    return (

      

        
Push State Anchor
        

        Home

        About

        Careers

        

          {location => (

            
{location.pathname}

          )}

        

      

    )

  }

}


export default App

```

`react-pushstate-anchor` will render a simple `` anchor tag if JavaScript is unavailable.