cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests 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; @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 s from './Marquee.module.css'
import { FC, ReactNode, Component } from 'react' import { FC, ReactNode, Component } from 'react'
import Ticker from 'react-ticker' import Ticker from 'react-ticker'
import { useInView } from 'react-intersection-observer'
interface Props { interface Props {
className?: string className?: string
@ -9,7 +10,11 @@ interface Props {
variant?: 'primary' | 'secondary' variant?: 'primary' | 'secondary'
} }
const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => { const Maquee: FC<Props> = ({
className = '',
children,
variant = 'primary',
}) => {
const rootClassName = cn( const rootClassName = cn(
s.root, s.root,
{ {
@ -18,14 +23,20 @@ const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => {
}, },
className className
) )
const [ref, inView] = useInView({
triggerOnce: true,
rootMargin: '200px 0px',
})
console.log(inView)
return ( return (
<div className={rootClassName}> <div className={rootClassName} ref={ref}>
<Ticker offset={80}> {inView ? (
{({ index }) => <div className={s.container}>{children}</div>} <Ticker offset={80}>
</Ticker> {() => <div className={s.container}>{children}</div>}
</Ticker>
) : null}
</div> </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": "^16.14.0",
"react-aria": "^3.0.0", "react-aria": "^3.0.0",
"react-dom": "^16.14.0", "react-dom": "^16.14.0",
"react-intersection-observer": "^8.30.1",
"react-merge-refs": "^1.1.0", "react-merge-refs": "^1.1.0",
"react-ticker": "^1.2.2", "react-ticker": "^1.2.2",
"tailwindcss": "^1.9" "tailwindcss": "^1.9"

5
yarn.lock
View File

@ -4896,6 +4896,11 @@ react-dom@^16.14.0:
prop-types "^15.6.2" prop-types "^15.6.2"
scheduler "^0.19.1" 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: react-is@16.13.1, react-is@^16.8.1:
version "16.13.1" version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"