# Norigin Spatial Navigation

Norigin Spatial Navigation is an open-source library that enables navigating between focusable elements built with [ReactJS](https://reactjs.org/) based application software.
To be used while developing applications that require key navigation (directional navigation) on Web-browser Apps and other Browser based Smart TVs and Connected TVs.
Our goal is to make navigation on websites & apps easy, using React Javascript Framework and React Hooks.
Navigation can be controlled by your keyboard (browsers) or Remote Controls (Smart TV or Connected TV).
Software developers only need to initialise the service, add the Hook to components that are meant to be focusable and set the initial focus.
The Spatial Navigation library will automatically determine which components to focus next while navigating with the directional keys. We keep the library light, simple, and with minimal third-party dependencies.

[![npm version](https://badge.fury.io/js/%40noriginmedia%2Fnorigin-spatial-navigation.svg)](https://badge.fury.io/js/%40noriginmedia%2Fnorigin-spatial-navigation)

# Illustrative Demo

Norigin Spatial Navigation can be used while working with Key Navigation and React JS.
This library allows you to navigate across or focus on all navigable components while browsing.
For example: hyperlinks, buttons, menu items or any interactible part of the User Interface according to the spatial location on the screen.

![Example](/readme-assets/norigin-spatial-navigation/norigin-spatial-navigation.gif)

[Example Source](https://github.com/NoriginMedia/Norigin-Spatial-Navigation/blob/master/src/App.tsx)

# Supported Devices

The Norigin Spatial Navigation library is theoretically intended to work on any web-based platform such as Browsers and Smart TVs.
For as long as the UI/UX is built with the React Framework, it works on the Samsung Tizen TVs, LG WebOS TVs, Hisense Vidaa TVs and a range of other Connected TVs.
It can also be used in React Native apps on Android TV and Apple TV, however functionality will be limited.
This library is actively used and continuously tested on many devices and updated periodically in the table below:

| Platform                   | Name                                                                                                                 |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| Web Browsers               | Chrome, Firefox, etc.                                                                                                |
| Smart TVs                  | [Samsung Tizen](https://developer.tizen.org/?langswitch=en), [LG WebOS](https://webostv.developer.lge.com/), Hisense |
| Other Connected TV devices | Browser Based settop boxes with Chromium, Ekioh or Webkit browsers                                                   |
| AndroidTV, AppleTV         | Only [React Native](https://reactnative.dev/docs/building-for-tv) apps, limited functionality                        |

<!-- INSERT_DETAILED_README_SPATNAV_HERE -->

# Developer Portal

For more detailed documentation and usage examples, visit our [Developer Portal](https://devportal.noriginmedia.com/docs/Norigin-Spatial-Navigation/)