Simple and straightforward solution to get the next logical record.
https://serhat-m.github.io/moveNext
npm i movenext
import moveNext from "movenext"
data
{ [key: string]: any }[]
array of recordsdirection
'prev' | 'next'
determines the directionendBehaviour
'default' | 'jump'
behaviour after the last logical entryselector(entry) => any
callback for selecting the id referenceentry
{ [key: string]: any }
entry ofdata
selectedId
undefined | ...
current selected id
@returns
new selected id
This example navigates through the data
Array, if the keyboard keys ArrowDown
or ArrowUp
are pressed. The selectedId
variable saves the current state.
import moveNext from "movenext"
const data = [
{ id: 1, title: "Dataset 1" },
{ id: 2, title: "Dataset 2" },
{ id: 3, title: "Dataset 3" },
]
let selectedId = undefined
document.addEventListener("keydown", (event) => {
const direction = event.key === "ArrowDown" ? "next" : event.key === "ArrowUp" ? "prev" : false
if (direction) {
selectedId = moveNext({
data,
direction,
endBehaviour: "default",
selector: (entry) => entry.id,
selectedId,
})
}
})
import moveNext from "movenext"
const [data, setData] = useState([
{ id: 1, title: "Dataset 1" },
{ id: 2, title: "Dataset 2" },
{ id: 3, title: "Dataset 3" },
])
const [selectedId, setSelectedId] = useState(undefined)
const keyDownHandler = useCallback(
(event) => {
const direction = event.key === "ArrowDown" ? "next" : event.key === "ArrowUp" ? "prev" : false
if (direction) {
setSelectedId((prevSelectedId) => {
return moveNext({
data,
direction,
endBehaviour: "default",
selector: (entry) => entry.id,
selectedId: prevSelectedId,
})
})
}
},
[data],
)
useEffect(() => {
document.addEventListener("keydown", keyDownHandler)
return () => {
document.removeEventListener("keydown", keyDownHandler)
}
}, [keyDownHandler])
The following types are available and can be used to define e. g. typed helper functions:
Direction = "prev" | "next"
EndBehaviour = "default" | "jump”
import type { Direction, EndBehaviour } from "movenext"
// Example 1
function updateData(direction: Direction, behaviour: EndBehaviour) {
...
}
// Example 2
const direction: Direction | false = event.key === "ArrowDown" ? "next" : event.key === "ArrowUp" ? "prev" : false