Skip to content

Instantly share code, notes, and snippets.

@nihlton
nihlton / LazyImage.js
Last active December 28, 2020 10:26
Minimal Lazy Loading Image Component
import React, { useEffect, useRef, useState } from 'react'
import './LazyImage.scss'
const LazyImage = (props) => {
const [ isLoaded, setIsLoaded ] = useState(false)
const [ isVisible, setIsVisible ] = useState(false)
const { src, alt, width, height, className } = props
const placeHolderStyle = {paddingBottom: `${(height / width) * 100}%`}
const imageRef = useRef()
@nihlton
nihlton / persisted-timeboxed-redux-store.js
Last active July 2, 2020 13:50
Persist Redux in localStorage, with an expiration schedule for each store key.
import { getInitialState, syncLocalStorageWithRedux } from './util-localStorage'
const reduxStorageKey = 'my-application:'
const ONE_SECOND = 1000
const ONE_MINUTE = ONE_SECOND * 60
const ONE_HOUR = ONE_MINUTE * 60
const ONE_DAY = ONE_HOUR * 24
const ONE_YEAR = ONE_DAY * 365
// create a white list. key is the redux store key, and lifeSpan is