diff --git a/package.json b/package.json
index b23c0ca..3db6716 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"dependencies": {
"@plone/scripts": "*",
"react-countup": "6.3.1",
+ "react-visibility-sensor": "5.1.1",
"volto-slate": "*"
},
"devDependencies": {
diff --git a/src/StatisticBlock/View.jsx b/src/StatisticBlock/View.jsx
index f9f1b5d..239659b 100644
--- a/src/StatisticBlock/View.jsx
+++ b/src/StatisticBlock/View.jsx
@@ -1,12 +1,32 @@
import React from 'react';
import cx from 'classnames';
import CountUp from 'react-countup';
+import VisibilitySensor from 'react-visibility-sensor';
import { Statistic } from 'semantic-ui-react';
import { UniversalLink } from '@plone/volto/components';
import { serializeText } from '@eeacms/volto-statistic-block/helpers';
import './styles.less';
+const CountUpWrapper = ({ countUpRef, start }) => {
+ const [visible, setVisible] = React.useState(false);
+
+ return (
+ {
+ start();
+ if (isVisible && !visible) {
+ setVisible(true);
+ }
+ }}
+ active={!visible}
+ delayedCall
+ >
+
+
+ );
+};
+
const View = ({ data, mode }) => {
const {
horizontal = false,
@@ -64,7 +84,9 @@ const View = ({ data, mode }) => {
decimals={animation.decimals > 0 ? animation.decimals : 0}
prefix={animation.prefix || ''}
suffix={animation.suffix || ''}
- />
+ >
+ {(props) => }
+
{item.label}