https://github.com/moxystudio/next-with-router-ref
An alternative to Next.js withRouter HOC that supports refs by forwarding them
https://github.com/moxystudio/next-with-router-ref
forward-ref next ref router with-router
Last synced: 24 days ago
JSON representation
An alternative to Next.js withRouter HOC that supports refs by forwarding them
- Host: GitHub
- URL: https://github.com/moxystudio/next-with-router-ref
- Owner: moxystudio
- License: mit
- Created: 2019-11-26T18:35:43.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-12-09T01:17:55.000Z (over 4 years ago)
- Last Synced: 2025-07-08T23:01:41.443Z (11 months ago)
- Topics: forward-ref, next, ref, router, with-router
- Language: JavaScript
- Homepage:
- Size: 602 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# next-with-router-ref
[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Coverage Status][codecov-image]][codecov-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]
[npm-url]:https://npmjs.org/package/@moxy/next-with-router-ref
[downloads-image]:https://img.shields.io/npm/dm/@moxy/next-with-router-ref.svg
[npm-image]:https://img.shields.io/npm/v/@moxy/next-with-router-ref.svg
[travis-url]:https://travis-ci.org/moxystudio/next-with-router-ref
[travis-image]:https://img.shields.io/travis/moxystudio/next-with-router-ref/master.svg
[codecov-url]:https://codecov.io/gh/moxystudio/next-with-router-ref
[codecov-image]:https://img.shields.io/codecov/c/github/moxystudio/next-with-router-ref/master.svg
[david-dm-url]:https://david-dm.org/moxystudio/next-with-router-ref
[david-dm-image]:https://img.shields.io/david/moxystudio/next-with-router-ref.svg
[david-dm-dev-url]:https://david-dm.org/moxystudio/next-with-router-ref?type=dev
[david-dm-dev-image]:https://img.shields.io/david/dev/moxystudio/next-with-router-ref.svg
An alternative to Next.js `withRouter` HOC [that supports refs](https://github.com/zeit/next.js/issues/9528) by forwarding them.
## Installation
```sh
$ 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
```js
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
Hello;
}
};
export default withRouterRef(MyComponent);
```
...and then refs work as you would expect:
```js
import React, { useRef } from 'react';
import MyComponent from 'path/to/my-component';
const MyParentComponent = () => {
const myComponentRef = useRef();
return ;
};
export default MyParentComponent;
```
## Tests
```sh
$ npm test
$ npm test -- --watch # during development
```
## License
Released under the [MIT License](https://www.opensource.org/licenses/mit-license.php).