|
| 1 | +# react-js-spatial-navigation |
| 2 | +A wrapper of js-spatial-navigation to react components |
| 3 | + |
| 4 | +## Example |
| 5 | +```javascript |
| 6 | +import React from 'react'; |
| 7 | +import { render } from 'react-dom'; |
| 8 | +import SpatialNavigation, { Focusable, FocusableSection } from 'react-js-spatial-navigation' |
| 9 | + |
| 10 | +function focus1() { |
| 11 | + console.log('focused 1') |
| 12 | +} |
| 13 | + |
| 14 | +function unfocus2() { |
| 15 | + console.log('unfocus 2') |
| 16 | +} |
| 17 | + |
| 18 | +const App = () => ( |
| 19 | + <SpatialNavigation> |
| 20 | + <Focusable onFocus={focus1}> |
| 21 | + <p>Element 1</p> |
| 22 | + </Focusable> |
| 23 | + <Focusable onUnfocus={unfocus2}> |
| 24 | + <p>Element 2</p> |
| 25 | + </Focusable> |
| 26 | + |
| 27 | + <FocusableSection defaultElement="active"> |
| 28 | + <Focusable> |
| 29 | + <p>Element 3</p> |
| 30 | + </Focusable> |
| 31 | + <Focusable className="active"> |
| 32 | + <p>Element 4</p> |
| 33 | + </Focusable> |
| 34 | + </FocusableSection> |
| 35 | + </SpatialNavigation> |
| 36 | +); |
| 37 | + |
| 38 | +render(<App />, document.getElementById('root')); |
| 39 | +``` |
| 40 | +[Live Example](https://codesandbox.io/s/ryn6450wrn) |
| 41 | + |
| 42 | +## Documentation |
| 43 | + |
| 44 | +### `<SpatialNavigation>` |
| 45 | +This component initialize the Spatial Navigation library. |
| 46 | +It should be used only one time and in the root node of the application. |
| 47 | +The spatial navigation will only work within the Focusable components. |
| 48 | + |
| 49 | +### `<Focusable>` |
| 50 | +A Focusable component that handle the onFocus, onUnfocus, onClickEnter events. |
| 51 | +``` |
| 52 | +Props: |
| 53 | + onFocus: (optional) |
| 54 | + A function that will be fired when the component is focused. |
| 55 | + |
| 56 | + onUnfocus: (optional) |
| 57 | + A function that will be fired when the component is unfocused. |
| 58 | + |
| 59 | + onClickEnter: (optional) |
| 60 | + A function that will be fired when the component is focused and enter key is pressed. |
| 61 | +``` |
| 62 | + |
| 63 | +### `<FocusableSection>` |
| 64 | +A Focusable Section can specify a behaviour before focusing an element. |
| 65 | +I.e. selecting a default element, the first element or an active one. |
| 66 | + |
| 67 | +``` |
| 68 | +Props: |
| 69 | + defaultElement: (default: '') |
| 70 | + The default element that will be focused when entering this section. |
| 71 | + This can be: |
| 72 | + * a valid selector string for "querySelectorAll". |
| 73 | + * a NodeList or an array containing DOM elements. |
| 74 | + * a single DOM element. |
| 75 | + * an empty string. |
| 76 | + |
| 77 | + enterTo: (default: 'default-element') |
| 78 | + If the focus comes from another section, you can define which element in this section should be focused first. |
| 79 | + This can be: |
| 80 | + * 'last-focused' indicates the last focused element before we left this section last time. If this section has never been focused yet, the default element (if any) will be chosen next. |
| 81 | + * 'default-element' indicates the element defined in defaultElement. |
| 82 | + * an empty string. |
| 83 | +``` |
0 commit comments