use-wrapping-index
Useful for managing a wrapping index for an array of items.
Usage
import useWrappingIndex from "@alexcarpenter/use-wrapping-index";
const sampleData = [{ name: "Alex" }, { name: "Stacey" }, { name: "Frankie" }];
function App() {
const {
activeIndex,
previousIndex,
nextIndex,
moveToPreviousIndex,
moveToNextIndex,
} = useWrappingIndex({
maxIndex: sampleData.length,
});
return (
<>
<p>Active index: {activeIndex}</p>
<p>Previous index: {previousIndex}</p>
<p>Next index: {nextIndex}</p>
<hr />
<p>Active user: {sampleData[activeIndex].name}</p>
<p>Previous user: {sampleData[previousIndex].name}</p>
<p>Next user: {sampleData[nextIndex].name}</p>
<hr />
<button onClick={moveToPreviousIndex}>Previous</button>
<button onClick={moveToNextIndex}>Next</button>
</>
);
}
This package was based off of the use-roving-index hook by souporserious.
210 Jan 4, 2023
14 Apr 22, 2022
14 Sep 9, 2022
4 Oct 14, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
13 Mar 8, 2022
26 Sep 22, 2021
215 Dec 30, 2022