https://github.com/lipp/react-router-hash-route
Enable hash / id based routes with react router
https://github.com/lipp/react-router-hash-route
Last synced: 12 months ago
JSON representation
Enable hash / id based routes with react router
- Host: GitHub
- URL: https://github.com/lipp/react-router-hash-route
- Owner: lipp
- License: mit
- Created: 2017-10-29T19:20:09.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-01T08:37:39.000Z (over 8 years ago)
- Last Synced: 2024-11-15T03:09:42.866Z (over 1 year ago)
- Language: JavaScript
- Size: 26.4 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-router-hash-route
Enable hash / id based routes with react router.
Check the [example](https://react-router-hash-route.now.sh).
The `HashRoute` component scrolls to the target element after `componentDidMount` or on route change when the hash / id matches. The target element is NOT wrapped with `
`. Thus the element must render its `id` properly.
`HashRoute` is compatible with all means of `react-router-dom` to navigate (`Link`, `NavLink`, etc).
# Install
```sh
$ npm i react-router-hash-route
```
# Usage
Given the component `Foo` (Your component MUST render the `id` prop):
```
import {Link} from 'react-router-dom'
const Foo = ({id}) =>
Foo
const App = () => (
Foo
)
```
Use `HashRoute` somewhere inside App. You must provide either `render` or `component` prop (similar to `Route`).
## `render` prop
```js
import HashRoute from 'react-router-hash-route'
}
/>
```
## `component` prop
```js
```
# Options
## `offset` prop (number, default=0)
An optional vertical offset when using fixed headers.
## `scoll` prop (function, default="jump")
A customizable scroll function with the signature:
```js
const scroll = (node, offset) = {}
```
If you want to have animations etc.
# Limitations
## Scenario
- active route is "/#foo", #foo is in view
- user scrolls
- user clicks link to "/#foo" (e.g. from top nav)
## Expected Behaviour
- HashRoute calls `scroll` prop (-> #foo scrolls into view)
## Actual Behaviour
- with `BrowserRouter`: `scroll` prop is not invoked. Browser "jumps" to #foo.
- with `HashRouter`: `scroll` prop is not invoked. Scroll position remains onchanged.
# Development
Start watching and building the lib:
```sh
$ npm i && npm run dev
```
Build and start the example website with hot-reloading:
```sh
$ cd example
$ npm i && npm run dev
```