navgroups v0.0.35
NavGroups
In Development
NavGroup is a flexible and powerful react component for creating ui navigation base around big screen TV's. It allows you to quickly map out a web layout that can be controlled via a keyboard, similar to the type of experience you might find on TV's.
Built With
React: A JavaScript library for building user interfaces
TypeScript: JavaScript that scales.
Setup
For production use install NavGroups using NPM and include it in your own React build process using webpack.
bash $ npm install -save NavGroups
import * as React from "react";
import * as ReactDOM from "react-dom";
import { NgController, NavGroup, NavItem } from "nav-groups";Development
$ git clone https://github.com/Devine-Davies/NavGroups.git
$ cd NavGroups
$ npm install
$ npm run dev - Deployment environment
$ npm run start - Deployment environment
$ npm run prepublish - Deployment environmentHTML Markup & Props
Below illustrates the type of markup used to construct the navgroups react componant. The exsample is given in the from of TSX
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { NgController, NavGroup, NavItem } from "nav-groups";
const App = () => (
<div className='window' >
<NavGroup name="main-menu" direction="vertical" onLeft="" onRight="ng:last" >
<NavItem>Movies</NavItem>
<NavItem>Music</NavItem>
<NavItem>Profile</NavItem>
<NavItem >Setting</NavItem>
</NavGroup>
<NavGroup name="movie-list" onLeft="ng:main-menu" onLeft="" >
<NavItem>Movie .01</NavItem>
<NavItem>Movie .02</NavItem>
<NavItem>Movie .03</NavItem>
<NavItem>Movie .04</NavItem>
</NavGroup>
</div>
);
ReactDOM.render(<App />, document.getElementById("example") );Setting Props for NavGroup && NavItem
| Setting props | Avalable | Type | Description |
|---|---|---|---|
| name | NG & NI | String | The name you wish to give the navitem/navgroup. If none given a random one will be generated. |
| activeClassName | NG & NI | String | Class name given to an active navgroup/navitem |
| direction | NG | String | Can except "horizontal" or "vertical" the key binding will the change depending on the direction specified |
| indicateActiveItem | NG | Boolean | When decleard on a group attr, the group will add the class of the item name to it's self |
| historyItem | NG | Boolean | Tells the navgroup to remember to remember the last selected navitem and use that as the first selected navitem when entering. |
| startingPoint | NI | Boolean | Is the main item that will be select when first entering the group. |
| entryPoint | NI | Boolean | Use this navitem as the first selected item wehn entering a navgroup, takes priority over historyItem. |
Action Props & Instructions
Action props define what type of interaction you want the navgroup/navitem and every action needs an instruction. The Example below show's how these actions are binded to either the NavGroup and NavItem components.
<NavGroup name="movie-list" onLeft="" >
<NavItem onLeft="" onDown="" >Movie .01</NavItem>
</NavGroup>Action Props
| Action prop | Avalable | Description |
|---|---|---|
| onEnter | NG & NI | Invoked via the enterkey (↵) |
| onBack | NG & NI | Invoked via the backkey (←) is invoked |
| onUp | NG & NI | Invoked via the up arrow key (▲) or W |
| onRight | NG & NI | Invoked via the right arrow key(►) or D |
| onDown | NG & NI | Invoked via the down arrow key(▼) or S |
| onLeft | NG & NI | Invoked via the left aorrow key(◄) or A |
Default actions are applied and change occordadly depending on the direction of navgroup.
| Action prop | Vertical | Horizontal |
|---|---|---|
| onUp | ni:prev | ng:prev |
| onRight | ng:next | ni:next |
| onDown | ni:next | ng:next |
| onLeft | ng:prev | ni:prev |
Action instructions
Instructions contain infromation on how the navgroup/navitem should respond when an action has been invoked.
Navgroup instructions
| Instructions | is default | Description |
|---|---|---|
| ng:next | default | next navgroup |
| ng:prev | default | previous navgroup |
| ng:last | Go to last selected navgroup | |
| ng:{{#}} | Go to the given navgroup by index | |
| ng:{{name}} | Go to the navgroup by name | |
| hook:{{name}} | add the name of your custom hook (must be set up in custom methods ) |
Navitem instructions
| Instructions | is default | Description |
|---|---|---|
| ni:next | default | next navitem |
| ni:prev | default | previous navitem |
| ni:last | Go to last item | |
| ni:first | Go to first item | |
| ni:{{#}} | Go to the given index of an item | |
| ni:{{name}} | Go to the item with that name |
It's important to note that
NavItem'stake priority overNavGroup'sinstructions.Instructions can be concatenated together by using the pipe operator (
|) For exampleng:{{#}}|ni:{{#}}
Programmatically run instruction
Instructions can be invoke via the NgController by calling the run_instructions() methord and then passing the instruction string.
import { NgController, NavGroup, NavItem } from "navgroups";
NgController.run_instructions( 'ng:menu|ni:profile' )Authors
Rhys Devine-Davies - Profile
License
This project is licensed under the MIT License - see the LICENSE.md file for details`