Needs examples

[hamishrouse]

Was wondering if you could add quick example/s of how to use React Spatial Navigation.

I keep getting an error saying Element is not defined - most likely implementing I'm it wrong

[dead]

This is a simple example, hope it helps you 😄
https://codesandbox.io/s/ryn6450wrn

[hamishrouse]

Thanks @dead - I am using Next.js and I think this was the root of my problem. When loading spatial navigation on load, the Element object is not readily available and so spatial navigation breaks.

I'm currently looking at the best approach to work with this situation :)

[dead]

You mean the "JsSpatialNavigation" is not loaded before the component?
I think the proper way to fix this issue is to move all the logic from the library to inside the component.

Can you post a stack trace?

[hamishrouse]

From further investigation, I'm assuming its related to this issue: vercel/next.js#219

I was hoping updating when some of the logic happened from componentWillMount to componentDidMount would resolve it, but seems not the case...

Anyways, this seems not an issue with react-js-spatial-navigation but with client side rendering being done on the server side...

Stack Trace

Element is not defined
ReferenceError: Element is not defined
    at Object.<anonymous> (C:\Dev\.next\dist\components\spatial-navigator\lib\spatial_navigation.js:86:30)
    at Module._compile (module.js:541:32)
    at Module._compile (C:\Dev\node_modules\source-map-support\source-map-support.js:492:25)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Dev\.next\dist\components\spatial-navigator\index.js:36:27)

Commenting out lines 73-78 in file lib\spatial_navigation.js appears to resolve the issue (tho not fully tested after load)

/************/
/* Polyfill */
/************/
var elementMatchesSelector =
  // Element.prototype.matches ||
  // Element.prototype.matchesSelector ||
  // Element.prototype.mozMatchesSelector ||
  // Element.prototype.webkitMatchesSelector ||
  // Element.prototype.msMatchesSelector ||
  // Element.prototype.oMatchesSelector ||
  function(selector) {
    var matchedNodes = (this.parentNode || this.document).querySelectorAll(
      selector
    );
    return [].slice.call(matchedNodes).indexOf(this) >= 0;
  };

Will look into further on Monday

[hamishrouse]

Created a pull request #2