Nodes-navigation-focus NPM

nodes-navigation-focus

nodes-navigation-focus is a JS library which automates the focus moviment in the screen.

The library uses the react-hooks to manipulate the DOM and recieve and return infomation about the state of the element.

Installation

Install nodes-navigation-focus with npm

  npm install nodes-navigation-focus

Features

Manage state of DOM elements
Move focus state of a complex layout structure
Allows you recive informartion about the elemenet that is currently focused

API Reference

We have to understand that we will have 2 types of 'uneNavigation' instance.

One that it will be reference to a DOM element that contains an agrupation of elements that will recive the focus.

And another intance that will reference the specific DOM elements that will recive the focus.

Types

You can extract them from the library

  import useNavigation, { types } from 'nodes-navigation-focus'

Type	Description
`single`	Used to refere to a single DOM element without parent
`line`	Used to refere to an array of elements
`matrix`	Used to refere to an a array of elements that will be displayed like a matrix
`list`	Used to refere to a list of items,
`object`	Used to refere to an object

Parameters

Common params

Parameter	Type	Description
`focusKey`	`string`	Element key
`extraProps`	`object`	object that stores element information

Common params for PARENT reference

Parameter	Type	Description
`type`	`string`	Required. type of layout structure that
`rememberLastFocused`	`boolean`	Add this option to remember the las element focused in the structure
`onFocusedChildNodeChanges`	`func`	Triggers when the focus in the structure changes
`onOut`	`object`	Triggers when the focus wants to go out of the element
`preferredChildFocusKey`	`string`	Default son key that it will be focused if the references is not specified

Common params for SON reference

Parameter	Type	Description
`parent`	`ref`	Required. the 'useNavigation' hook will recieve the reference of the parent generated with 'useNavigation' hook
`onMouseOver`	`func`	triggers when mouse over of the element
`onMouseOut`	`func`	triggers when mouse out of the element
`onClick`	`func`	triggers when element is clicked
`onFocusedNode`	`func`	It will triggers when the element is with focus
`onEnterPressedNode`	`func`	Triggers when the element is pressed with enter
`onArrowPress`	`func`	Trigger when element is pulses a key moviment

Single type

This type can't have son elements

Parameter	Type	Description
`onMove`	`func`	Triggers when focus wants to go another element

Line type

Parameter	Type	Description
`position`	`number`	position order
`flow`	`string`	If the structure is gonna be in horizontal or in vertical

List type

For son:

Parameter	Type	Description
`row`	`number`	row order
`position`	`number`	position order

For parent:

Parameter	Type	Description
`startPosition`	`number`	start position of the lsit
`rememberLastFocused`	`boolean`	remember last list focused
`rememberLastRowPosition`	`boolean`	remember last son reference where focused when the focus is moving into the lists

Matrix type

Parameter	Type	Description
`row`	`string`	row order
`column`	`object`	column order

Navigation utilities

Parameter	Type	Description
`ref`	`string`	Required. The use of this property returned by 'useNavigation' is required to set the reference with the DOM node
`focusSelf`	`func`	a function to focus the current element
`focusSelf`	`func`	a function to focus the current element
`setFocus`	`func`	a function to change focus between structures
`focused`	`boolean`	gives you information if node is currently focused or not
`hasFocusedChild`	`boolean`	gives you information about if it has some son element node focused
`focusKey`	`string`	return the key of the node
`getFocusedNode`	`func`	return information about focused node
`getPressedNode`	`func`	returns information about las pressed node

useNavigation()

Recieves a ref of a DOM element with a specific configuration and returns a DOM element ref and the state of the element.

Usage/Examples

import useNavigation, { types } from 'nodes-navigation-focus';

const [matrixRef, { focused, setFocus, hasFocusedChild }] = useNavigation({
        type: types.MATRIX,
        focusKey: 'matrix',
        preferredChildFocusKey: 'item-1-1',
        onFocusedChildNodeChanges: (config) => {
            console.log(config)
        },
        onOut: {
            top: () => {
                setFocus('slider')
            },
            left: () => {
                setFocus('menu')
            },
        }
    })