react-animista
Version:
More than 200 free CSS animations from Animista website!
43 lines (42 loc) • 2.27 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);
};
import * as React from "react";
import ViewportListener from "./core/ViewportListener";
import "./assets/index.css";
var Animista = function (props) {
var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
var children = props.children, _b = props.style, style = _b === void 0 ? {} : _b, delay = props.delay, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.tag, tag = _d === void 0 ? "div" : _d, _e = props.className, className = _e === void 0 ? "" : _e, _f = props.onClick, onClick = _f === void 0 ? function () { } : _f, _g = props.direction, direction = _g === void 0 ? "normal" : _g, _h = props.iterationCount, iterationCount = _h === void 0 ? 1 : _h, _j = props.duration, duration = _j === void 0 ? "0.5s" : _j;
var id = generateUniqId();
var finalClassName = !disabled && buildClassName(props, isVisible, className);
var tagStyle = __assign({}, style, { animationDelay: disabled ? undefined : delay, animationDirection: direction, animationIterationCount: iterationCount, animationDuration: duration });
var AnimistaComponent = React.createElement(tag, {
id: id,
style: tagStyle,
className: finalClassName,
onClick: onClick
}, children);
return (React.createElement(ViewportListener, { id: id, enabled: !disabled && !isVisible, onViewportVisible: function () { return setIsVisible(true); } }, AnimistaComponent));
};
/* UTILS */
var generateUniqId = function () { return "Animista-" + Math.random(); };
var buildClassName = function (props, isVisible, other) {
var type = props.type, _a = props.hover, hover = _a === void 0 ? false : _a;
if (!isVisible)
return "";
var className = type.toString();
if (hover)
className += "-hover";
if (other && other.length)
className += " " + other;
return className;
};
export default Animista;