react-router-historian

    0.0.2 • Public • Published

    React Router Historian

    Keeps a record of past locations in react-router (v4.x) apps. This is useful when you for example need a contextual back button:

    image of back button

    Requirements

    This plugin is written for React Router 3.X

    Installation

    Yarn: $ yarn add react-router-historian

    NPM: $ npm i reaction-router-historian -S

    Usage and Example

    You first need to wrap your app with the HistorianProvider which listens to React Router changes:

    import { render } from 'react-dom';
    import { BrowserRouter as Router } from 'react-router-dom';
    import { Historian } from 'react-router-historian';
     
    const App = () => (
        <Router>
            <Historian>
                // ...
            </Historian>
        </Router>
    );
     
    render(<App />, document.getElementById('app'));

    Next, you wrap the components that read and edit (see below) history with the withHistorian HOC:

    import { React } from 'react';
    import { withHistorian } from 'react-router-historian';
     
    class MyComponent extends React.Component {
     
        componentWillReceiveProps(props) {
            props.updateCurrentLocation({ title: 'MyComponentTitle' });
        }
        
    }
     
    export withHistorian(MyComponent);
     
    class MyOtherComponent extends React.Component {
     
        backFunc() {
            // ...
        }
     
        render() {
            const lastPage = this.props.getLastLocation();
            
            return (
                <div>
                    <button onClick={backFunc}>Back to {lastPage.title}</button>
                </div>
            );
        }
        
    }
     
    export withHistorian(MyOtherComponent);
     

    Component functions

    These functions are made available via props to the components wrapped with withHistorian:

    getCurrentLocation():Object

    getLastLocation():Object

    updateCurrentLocation(location)

    Thanks

    React Router Historian is heavily inspired by react-router-last-location by Dawid Karabin

    NPM package exists thanks to react-build-lib by adrianmcli

    Install

    npm i react-router-historian

    DownloadsWeekly Downloads

    0

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • avatar