Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/HenrikJoreteg/internal-nav-helper
Helper function for handling internal navigation in Single Page Apps (SPAs) in ~250 bytes before gzip.
https://github.com/HenrikJoreteg/internal-nav-helper
Last synced: 3 months ago
JSON representation
Helper function for handling internal navigation in Single Page Apps (SPAs) in ~250 bytes before gzip.
- Host: GitHub
- URL: https://github.com/HenrikJoreteg/internal-nav-helper
- Owner: HenrikJoreteg
- Created: 2018-02-12T19:10:22.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:15:50.000Z (almost 2 years ago)
- Last Synced: 2024-07-19T10:32:44.555Z (4 months ago)
- Language: JavaScript
- Size: 195 KB
- Stars: 54
- Watchers: 3
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# internal-nav-helper
Helper function for handling internal navigation in Single Page Apps (SPAs) in ~250 bytes before gzip.
Since events bubble you add a single click handler at the root of your app and then use this little utility to determine if it should be considered an internal navigation event. If it _is_ internal it calls the function you supplied it. That's it!
### How it works
It works by examining the event and event target. First it makes sure this was a left click (button `0`) and that no modifier keys were being pressed (shift, ctrl, etc). If the event qualifies as a basic click, then it examines the `event.target`. It looks for an `` tag first on the target element itself, then starts walking up the element tree looking to see if the target was wrapped in an `` tag. If it finds one with an origin that matches `window.location.origin` and that doesn't have a `target='_blank'` or a `target='_external'` on it, then it's considered an internal navigation and calls the function you supplied with the new pathname.
### Why would you want this?
1. Instead of using some `` abstraction, you can just use plain old, `` tags anywhere in your app. This means, that everything that browsers do with a links, still works. Like when you hover them it shows the actual URL, etc.
2. It's puny at only ~250 bytes (before gzip)!
3. If for some reason your JS fails, it will navigate as usual because you're using real links in your app.
4. It won't mess with normal browser behavior, so it will never consider a CTRL+click, right-click, or clicking a tag with a `target="_blank"` to be an internal navigation event.
5. It's not tied to any framework, as long as you have some sort of function to call for setting a pathname you're good.
6. Because there's very little magic, it promotes understanding of how these things actually work.
## install
```
npm install internal-nav-helper
```
## example
This works with any framework it's just inspecting DOM events. But I like Preact and [redux-bundler](https://github.com/henrikjoreteg/redux-bundler) so here's an example for that setup:
```js
import { h } from 'preact'
import { connect } from 'redux-bundler-connect'
import { getNavHelper } from 'internal-nav-helper'
const RootComponent = ({ doUpdateUrl }) => (
Your app
Some internal link will be handled
An internal link that should open in new window
Technically same origin, but will be ignored because of
`target="_external"`
An external link it will not try to handle this
)
export default connect(
'doUpdateUrl',
RootComponent
)
```
## changelog
- `3.1.0` now ignores `rel="external"` closes [#3](https://github.com/HenrikJoreteg/internal-nav-helper/issues/3). Updated to latest microbundle.
- `3.0.0` changing how second internal function is exposed. Updated microbundle to latest. (fumbled 2.x deploys, bumping major incase someone happened to install 2.x)
- `1.2.0` now exposes its internal `findAnchorTag` method.
- `1.1.0` now ignores links with `download` attribute (thanks [@huygn](https://github.com/huygn)). Updated dependencies. Removed sourcemaps (seemed unnecessary).
- `1.0.2` fixed issues in IE.
## credits
If you like this follow [@HenrikJoreteg](http://twitter.com/henrikjoreteg) on twitter.
## license
[MIT](http://mit.joreteg.com/)