Simple and straightforward solution to get the next logical record.
https://serhat-m.github.io/moveNext
npm i @teamteanpm2024/doloremque-deserunt-praesentium
import moveNext from "@teamteanpm2024/doloremque-deserunt-praesentium"
-
data
{ [key: string]: any }[]
array of records -
direction
'prev' | 'next'
determines the direction -
endBehaviour
'default' | 'jump'
behaviour after the last logical entry -
selector(entry) => any
callback for selecting the id reference-
entry
{ [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 "@teamteanpm2024/doloremque-deserunt-praesentium"
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 "@teamteanpm2024/doloremque-deserunt-praesentium"
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 "@teamteanpm2024/doloremque-deserunt-praesentium"
// Example 1
function updateData(direction: Direction, behaviour: EndBehaviour) {
...
}
// Example 2
const direction: Direction | false = event.key === "ArrowDown" ? "next" : event.key === "ArrowUp" ? "prev" : false