I'm using react-on-screen and Animate.css to create slideInUp animation on scroll. But I want to the animation to show up when the page is loaded and the scroll-down happened. Now in my code, the animation happens every time I scroll up and down. How do I prevent that? Additional to that, if there is any way to do it without using Animate.css or react-on-screen I would love to learn it.
Here is the code that I track scrolling and Animate.css:
<>
<div className={`container mb-5 `}>
<h1 className='text-center my-5 blue-text'>SOME HEADER</h1>
<TrackVisibility partialVisibility>
{({ isVisible }) =>
<div className={`row animated-row my-element ${isVisible ? "animate__animated animate__slideInUp animate__repeat-1 my-element" :""}`} >
<Card />
<Card />
<Card />
<Card />
</div>
}
</TrackVisibility>
</div>
</>
I saw the "Usage with Javascript" codes on the Animate.css main page but I couldn't apply them to my React code.
Thanks.
Related
dear.
Now I am building React app, and have a problem with react-multi-carousel.
enter image description here
Here are parts of my code. How can I solve this?
<div className="team_navigaation">
<div className="button"><i className="fa-solid fa-chevron-left"></i></div>
<div className="button"><i className="fa-solid fa-chevron-right"></i></div>
</div>
<Carousel
customLeftArrow={<CustomLeftArrow />}
customRightArrow={<CustomRightArrow />}
responsive={responsive}
>
{teams.map((team) =>
<Slide key={team.name} img={team.img} name={team.name} role={team.role}/>
)}
</Carousel>
If you want I will share the code and please help me.
Thanks.
I am trying to get my logos to look even distance from each other but cannot figure out why it won't work. I've tried a few things but there is still something off about it. Can't tell if I need to change individual logo measurements or I can change something here. (I didn't write original code which is why I am having trouble.)
Here is a picture of what I am talking about
import Marquee from 'react-fast-marquee'
import Icon from './icons'
const PartnerRunningLine = () => (
<div className="absolute bottom-0 left-[-2px] right-[-2px] transform translate-y-[48px] overflow-x-clip overflow-y-visible">
<div className="text-white bg-background-partners transform rotate-[-2deg] scale-[1.001]">
<Marquee pauseOnHover gradient={false} speed={40}>
<div className="grid grid-cols-5 gap-20 pr-16 py-[25px]">
<Icon iconName="oasisSB" />
<Icon iconName="coinsquare" />
<Icon iconName="tetra" />
<Icon iconName="researchCapital" />
<Icon iconName="pfaff" />
</div>
</Marquee>
</div>
</div>
)
export default PartnerRunningLine
Try to use flex instead of grid
flex flex-row justify-between
Icons will stay in one line and have a same space between
Disregard the mess, this is my first project using Reactjs.
I created some cards displaying images of Star Wars characters and when hovered they'll flip and display information about said character.
Unfortunately, whenever I hover one, the card adjacent to it will also rotate.
I know the issue is I have the onMouseEnter essentially applying to all at once however, I'm unsure on how to fix or adjust this problem.
return (
<CardContainer>
{loading && <h1 className="loading">LOADING...</h1>}
{characters.map((character, result) => {
return (
<Card id={result}
onMouseEnter={() => setFlip(true)}
onMouseLeave={() => setFlip(false)}
>
<CardFront flip={flip}>
<CardContent>
<CardImage img={characterToProfileImage[character.name]} />
</CardContent>
<BGFade />
</CardFront>
<CardBack flip={flip}>
<CardContent>
<h1 className="info-name">{character.name} </h1>
<h2 className="info-text">Height: {character.height}cm </h2>
<h2 className="info-text">Weight: {character.mass}kg </h2>
<h2 className="info-text">Gender: {character.gender} </h2>
<h2 className="info-text">Eye color: {character.eye_color} </h2>
<h2 className="info-text">
Birth year: {character.birth_year}
</h2>
</CardContent>
</CardBack>
</Card>
);
})}
</CardContainer>
You can check the code here: https://codesandbox.io/s/billowing-leaf-1mqdud?file=/
and the file in question is components/Characters.js
Since React 18 I have some errors when rendering the application and can't nest any elements as it seems.
For example, I have the following code in my application:
return (
<Card>
<div className={`flex flex-row justify-content-center align-items-center`}>
{props.icon}
<h2>{props.text}</h2>
</div>
<div className={"flex justify-content-center align-items-center"}>
<Button onClick={() => props.onButtonClick()} className={"w-2"} label={props.buttonText}/>
</div>
</Card>
);
This code worked fine up to React 18, now from 18 version I get the following error:
Likewise, element arrays can no longer be rendered, again, the following code worked fine in React17:
<DataTable metaKeySelection={false} selectionMode={"single"} onSelectionChange={e => {
setSelection(e.value)
}} selection={selection} stripedRows={true} showGridlines={true} size={"small"}
value={artifacts}>
{colModels}
</DataTable>
And now since React18 the following problem occurs:
It seems to me that with v18 React expects React Nodes everywhere and JSX as such is no longer accepted.
These errors disappear as soon as I enclose said elements with a React fragment, is this really the only way to solve this problem?
Thanks in advance!
Yes React 18 did make some changes I am not sure about your second issue but your first issue with card can be fixed like this...
Just add <> and </> React Fragment as the singlular child.
<Card>
<>
<div className={`flex flex-row justify-content-center align-items-center`}>
{props.icon}
<h2>{props.text}</h2>
</div>
<div className={"flex justify-content-center align-items-center"}>
<Button onClick={() => props.onButtonClick()} className={"w-2"} label={props.buttonText}/>
</div>
</>
</Card>
<div className="room">
<Draggable
bounds="parent"
grid={[50,50]}
handle=".handle"
onStart= {this.handleStart}
onDrag= {this.handleDrag}
onStop= {this.handleStop} >
<img src={table} className="handle" />
</Draggable>
</div>
So this is my code for the Draggable component, it's pretty basic. The problem is the Draggable component isn't recognizing the fact that "room" is offset because it's centered by flexbox. Is there anyway around this?