import { colors } from "../path/to/src/constants/theme.js";
css =>
color: ${colors.primaryWhite};
<TextSwap
step={this.state.step}
textArray={[
<>
<h1>2.8x Loupes3.5x Loupes</h1>
<p>
These 2.8x magnifcation loupes (often referred to as 3x by
many brands) offer extreme versatility and are perfectly
</p>
</>,
<>
<h1>2.8x Loupes3.5x Loupes</h1>
<p>
These 2.8x magnifcation loupes (often referred to as 3x by
many brands) offer extreme versatility and are perfectly
</p>
</>,
<>
<h1>2.8x Loupes3.5x Loupes</h1>
<p>
These 2.8x magnifcation loupes (often referred to as 3x by
many brands) offer extreme versatility and are perfectly
</p>
</>,
]}
/>
<Button type="primary">Hi there</Button>
<InfoBubble
type="info"
title="FIG. 1"
text="Back pain can be worsened by a poorly measured
working distance & neck pain by poor declination
angles."
/>
<Bubble onClick={() => console.log("clicked")} noAnimation={false} />
import computeIsMobile from "path/to/src/js/isMobile.js";
const isMobile = computeIsMobile();
import { getScreenSize } from "path/to/src/js/isMobile.js";
const size = getScreenSize();
=> size = { width: .. , height: .. }
font-family: Yantramanav, sans-serif;
P
import { screens } from "../path/to/src/constants/theme.js";
css =>
@media (max-width: ${screens.md}) {
...code here
}
screens = {
xs: '479px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
};
<SectionWrapper fluid={true/false}>Test content</SectionWrapper>
import Observer from 'src/components/Shared/Observer/index.js';
<Observer
threshold={0}
onChange={({ isIntersecting }) =>
console.log('isIntersecting', isIntersecting)
}
>
<h1>HI THERE 👋</h1>
</Observer>
Optional Props:
threshold - it represents the height percentage where the element must be in current view
number - default: 0 - possible: 0 - 1
disabled: - it will prevent the observer from triggering
boolean - dafault: false - possible: true / false
runOnce: - it will prevent the observer from triggering more than once
boolean - dafault: false - possible: true / false
delay: - the time that will wait untill will fade in
number - dafault: 0 - possible: amount in ms
transition: - animation function that will be used for fadding in
number - dafault: 1000ms - possible: amount in ms
animationTime: - the time that animation will take to complete
number - dafault: cubic-bezier(0.64, 0.04, 0.35, 1) - possible: any css transition