next-with-router-ref

An alternative to Next.js withRouter HOC that supports refs by forwarding them.

Installation

$ npm install @moxy/next-with-router-ref

This library is written in modern JavaScript and is published in both CommonJS and ES module transpiled variants. If you target older browsers please make sure to transpile accordingly.

Usage

import React, { Component } from 'react';
import withRouterRef from '@moxy/next-with-router-ref';

class MyComponent extends Component {
    render() {
        const { router } = this.props;

        // ...do something with router

        return <div>Hello</div>;
    }
};

export default withRouterRef(MyComponent);

...and then refs work as you would expect:

import React, { useRef } from 'react';
import MyComponent from 'path/to/my-component';

const MyParentComponent = () => {
    const myComponentRef = useRef();

    return <MyComponent ref={ myComponentRef }>;
};

export default MyParentComponent;

Tests

$ npm test
$ npm test -- --watch # during development

License

Released under the MIT License.