reactjs-bottom-navigation
Version:
A flexible bottom navigation component for React applications
49 lines (48 loc) • 2.13 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
/**
* A hook that manages the state of a bottom navigation component.
*
* @param {number | null} initialSelected - The initial selected item index.
* @param {boolean} hideOnScroll - Whether to hide the navigation on scroll.
* @returns {[{ current: number | null, hidden: boolean, scrollY: number }, (selected: number | null) => void]} - The state and setSelected function.
*/
var useBottomNavigation = function (initialSelected, hideOnScroll) {
var _a = (0, react_1.useState)({
current: initialSelected,
hidden: false,
scrollY: 0,
}), state = _a[0], setState = _a[1];
(0, react_1.useEffect)(function () {
setState(function (prevState) { return (__assign(__assign({}, prevState), { current: initialSelected })); });
}, [initialSelected]);
(0, react_1.useEffect)(function () {
if (window && hideOnScroll) {
var handleScroll_1 = function () {
var newScrollY = window.scrollY;
setState(function (prevState) { return (__assign(__assign({}, prevState), { hidden: newScrollY > prevState.scrollY, scrollY: newScrollY })); });
};
window.addEventListener("scroll", handleScroll_1);
return function () {
window.removeEventListener("scroll", handleScroll_1);
};
}
}, [hideOnScroll]);
var setSelected = function (selected) {
setState(function (prevState) { return (__assign(__assign({}, prevState), { current: selected })); });
};
return [state, setSelected];
};
exports.default = useBottomNavigation;