@tmnrp/react-breadcrumbs/dist/esm/index.js

Breadcrumbs is a component that can be used to display location of current route. Configurable icon, text and seperator as per need

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
/* eslint-disable react/display-name */
import React, { forwardRef, useEffect } from "react";
import { useState } from "react";
import { useImperativeHandle } from "react";
export const Breadcrumbs = forwardRef((_a, ref) => {
    var { className = "", style, seperator = "/", crumbsProps = {}, seperatorProps, iconProps, labelProps } = _a, props = __rest(_a, ["className", "style", "seperator", "crumbsProps", "seperatorProps", "iconProps", "labelProps"]);
    const [crumbs, setCrumbs] = useState(props.crumbs);
    useImperativeHandle(ref, () => ({
        setCrumbs: setCrumbs,
    }));
    const { className: crumbsPropsClassName } = crumbsProps, crumbsPropsRest = __rest(crumbsProps, ["className"]);
    //
    return (React.createElement("div", Object.assign({ className: `tm-breadcrumbs ${className}`, style: Object.assign({ display: "flex" }, style) }, props), crumbs === null || crumbs === void 0 ? void 0 : crumbs.map((_a, i) => {
        var { className = "", icon, label, style = {} } = _a, props = __rest(_a, ["className", "icon", "label", "style"]);
        return (React.createElement("div", Object.assign({ key: i, className: `crumb ${crumbsPropsClassName} ${className}`, style: Object.assign({ display: "flex" }, style) }, crumbsPropsRest, props),
            React.createElement(Seperator, Object.assign({}, seperatorProps), seperator),
            icon && React.createElement(Icon, Object.assign({}, iconProps), icon),
            label && React.createElement(Label, Object.assign({}, labelProps), label)));
    })));
});
const Seperator = (_a) => {
    var { children, style = {} } = _a, props = __rest(_a, ["children", "style"]);
    return (React.createElement("div", Object.assign({ style: {
            display: "flex",
            alignItems: "center",
        } }, props), children));
};
const Icon = (_a) => {
    var { children, style = {} } = _a, props = __rest(_a, ["children", "style"]);
    return (React.createElement("div", Object.assign({ style: {
            display: "flex",
            alignItems: "center",
        } }, props), children));
};
const Label = (_a) => {
    var { children, style = {} } = _a, props = __rest(_a, ["children", "style"]);
    return (React.createElement("div", Object.assign({ style: {
            display: "flex",
            alignItems: "center",
        } }, props), children));
};
//
export const useBreadcrumbs = ({ ref, crumbs, }) => {
    useEffect(() => {
        const currRef = ref === null || ref === void 0 ? void 0 : ref.current;
        currRef === null || currRef === void 0 ? void 0 : currRef.setCrumbs(crumbs);
        // cleanup : clear the breadcrumb
        return () => currRef === null || currRef === void 0 ? void 0 : currRef.setCrumbs([]);
    }, [ref, crumbs]);
};
//# sourceMappingURL=index.js.map