I'm using the Animate on Scroll library and React-Bootstrap for a project. Using the following code applies the animation:
<Row>
<Col xs={{span: 12}}
md={{span: 8, offset: 2}}
data-aos="fade-right">
<H2>Header</H2>
<P>
paragraph content
</P>
</Col>
</Row>
data-aos="fade-right"
properly applies the animation. However, I only want the animation to be applied with the user is viewing the site on desktop. I'm familiar with media queries, but I'm unsure how to apply this data-aos="fade-right"
so that it is only applied on desktops and not tablets or mobile.
Can I use React's conditional rendering to only apply data-aos="fade-right"
when the browser width is 786px+?
How can I grab the width of the browser, ensure that it is 768px or greater, and then apply data-ose="fade-right"
to the Bootstrap Col so that the animation only runs on large screens?
I've tried using window.innerWidth in a ternary operator but have some errors:
<Row>
<Col xs={{span: 12}}
md={{span: 8, offset: 2}}
{`${window.innerWidth > '700px' ? "data-aos="fade-right"" : ""}`}>
<H2>Header</H2>
<P>
paragraph content
</P>
</Col>
</Row>
What's the proper way to do this?