I have encountered an issue where the element works perfectly fine when using an external node module, but fails to function properly when using a locally downloaded node module. Unfortunately, I am unable to identify the root cause of this problem.
You can find the Swipi-cards library here.
Although my code is working as expected, once I switch to using a local node module as the source, it stops functioning. Any suggestions for potential fixes?
import React, { useState, useEffect } from 'react';
import Data from '../Data/webApps_data';
function Webapps() {
const [loading_animation, setloading_animation] = useState(false);
const [arrayChecker, set_arrayChecker] = useState(0);
useEffect(() => {
if (loading_animation === false) {
setTimeout(() => {
setloading_animation(!loading_animation);
console.log()
}, 100);
}
const script = document.createElement('script');
script.src = "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92e1e5fbe2fbbff1f3e0f6e1d2a3bca2bca2">[email protected]</a>/dist/swipi-cards/swipi-cards.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [loading_animation]);
const arrayLimiter = () => {
if (arrayChecker < (Data.length - 1)) {
set_arrayChecker(arrayChecker + 1)
} else {
set_arrayChecker(0)
}
console.log(Data);
};
const filteredData = Data[arrayChecker];
const textTransition = loading_animation ? 'text_transition ease' : 'text_transition';
const elementTransition = loading_animation ? 'element_transition ease' : 'element_transition';
//swipicard script
return (
<div className='webAppStyles'>
<rg-swipi-cards stack-offset-y="0.3" class='hydrated'>
<rg-swipi-card left-color='green' right-color='green' class='hydrated'>
<p>test1</p>
</rg-swipi-card>
<rg-swipi-card left-color='green' right-color='green' class='hydrated'>
<p>test2</p>
</rg-swipi-card>
</rg-swipi-cards>
</div>
)
}
scss styles:
rg-swipi-cards {
display: flex;
align-self: center;
background: chocolate;
width: 350px !important;
height: 400px !important;
align-items: center;
justify-content: center;
rg-swipi-card {
width: 100%;
position: absolute;
transition: all 0.5s ease-in-out 0s;
z-index: 4;
opacity: 1.33333;
}
p {
text-align: center;
}
}