crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Delay, and lazily load Marquees

Browse Source
This commit is contained in:
Belen Curcio 2020-11-05 18:06:59 -03:00
parent b6160b44ab
commit cc72658c99
5 changed files with 25 additions and 8876 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/ui/Marquee/Marquee.module.css
View File

@ -8,7 +8,7 @@
& > * {
@apply flex-1 px-16 py-4;
width: 430px;
width: 450px;
}
}

25
components/ui/Marquee/Marquee.tsx
View File

@ -2,6 +2,7 @@ import cn from 'classnames'
import s from './Marquee.module.css'
import { FC, ReactNode, Component } from 'react'
import Ticker from 'react-ticker'
import { useInView } from 'react-intersection-observer'
interface Props {
className?: string
@ -9,7 +10,11 @@ interface Props {
variant?: 'primary' | 'secondary'
}
const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => {
const Maquee: FC<Props> = ({
className = '',
children,
variant = 'primary',
}) => {
const rootClassName = cn(
s.root,
{
@ -18,14 +23,20 @@ const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => {
},
className
)
const [ref, inView] = useInView({
triggerOnce: true,
rootMargin: '200px 0px',
})
console.log(inView)
return (
<div className={rootClassName}>
<Ticker offset={80}>
{({ index }) => <div className={s.container}>{children}</div>}
</Ticker>
<div className={rootClassName} ref={ref}>
{inView ? (
<Ticker offset={80}>
{() => <div className={s.container}>{children}</div>}
</Ticker>
) : null}
</div>
)
}
export default M
export default Maquee

8868
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -30,6 +30,7 @@
"react": "^16.14.0",
"react-aria": "^3.0.0",
"react-dom": "^16.14.0",
"react-intersection-observer": "^8.30.1",
"react-merge-refs": "^1.1.0",
"react-ticker": "^1.2.2",
"tailwindcss": "^1.9"

5
yarn.lock
View File

@ -4896,6 +4896,11 @@ react-dom@^16.14.0:
prop-types "^15.6.2"
scheduler "^0.19.1"
react-intersection-observer@^8.30.1:
version "8.30.1"
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.30.1.tgz#e0ce4835d2834fc712b096aec65230de79eeaadb"
integrity sha512-BGHGkmWz/d4Gs+44jWkrZBtJ6//HGwouZ9ub+kRRoRfguw2JoDlVrgTDwkQ/deDJAR9keTkQmMilNu+onhqfgw==
react-is@16.13.1, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"