react-animarker
Version:
Animated mark tags on scroll
28 lines (27 loc) • 1.7 kB
JavaScript
;
"use client";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Animarker = void 0;
const react_1 = __importDefault(require("react"));
const hookez_1 = require("hookez");
exports.Animarker = react_1.default.memo((_a) => {
var { children, bgColor = "white", color = "yellow", duration = 1, transition = "ease", className, ref = null } = _a, props = __rest(_a, ["children", "bgColor", "color", "duration", "transition", "className", "ref"]);
const tagRef = ref !== null && ref !== void 0 ? ref : react_1.default.createRef();
const isFound = (0, hookez_1.useOnFound)(tagRef);
return (react_1.default.createElement("mark", Object.assign({ "data-done": isFound, style: Object.assign({ backgroundColor: "transparent", backgroundImage: `linear-gradient(90deg, ${bgColor} 50%, ${color} 0)`, backgroundSize: "200%", backgroundPosition: isFound ? "-100%" : 0, transition: `all ${duration}s ${transition}` }, props.style), className: className, ref: tagRef }, props), children));
});
exports.Animarker.displayName = "Animarker";