udittyagi

  const images = data.map(item => (
    <Image
      key={item.id}
      src={item.thumbnailUrl}
      fallbackSrc={fallbackImage}
      isLazy
      style={{
        display: 'block',
        height: '150px',
        width: '150px',

udittyagi

const [data, setData] = useState([])
  
useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/photos').then(res => {
      setData(res.data.slice(0, 15));
    }).catch(err => {
      console.error(err)
    })
  }, [])

udittyagi

import React from 'react';
import PropTypes from 'prop-types';


const Image = ({ src,
  srcSet,
  alt,
  fallbackSrc,
  isLazy,
  onClick,

udittyagi

import { useEffect, useRef, useState } from 'react';

const useIO = (options) => {
	const [elements, setElements] = useState([]);
	const [entries, setEntries] = useState([]);

	const observer = useRef(null);

	const { root, rootMargin, threshold } = options || {}

udittyagi

import React from 'react'
import {useBreakpoint} from './breakpoint.js'

const Usage = () => {
  const breakpoints = useBreakpoint();
  
  const matchingList = Object.keys(breakpoints).map(media => (
    <li key={media}>{media} ---- {breakpoints[media] ? 'Yes' : 'No'}</li>
  ))
  

udittyagi

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BreakpointProvider} from './breakpoint'



const queries = {
  xs: '(max-width: 320px)',
  sm: '(max-width: 720px)',

udittyagi

import React, {
  useState,
  useEffect,
  createContext,
  useContext} from 'react';

const defaultValue = {}

const BreakpointContext = createContext(defaultValue);

udittyagi

import React, {
  useState, 
  createContext,
  useContext} from 'react';

const defaultValue = {}

const BreakpointContext = createContext(defaultValue);

const BreakpointProvider = ({children, queries}) => {

udittyagi

const useBreakpoint = (queries) => {
  const [queryMatch, setQueryMatch] = useState(null);

  useEffect(() => {
    const mediaQueryLists = {};
    const keys = Object.keys(queries);
    
    // To check whether event listener is attached or not
    let isAttached = false;

udittyagi

 const handleQueryListener = () => {
      const updatedMatches = keys.reduce((acc, media) => {
        acc[media] = !!(mediaQueryLists[media] && mediaQueryLists[media].matches);
        return acc;
      }, {})
      console.log('Matches', updatedMatches)
    }
 
 keys.forEach(media => {
        if(typeof queries[media] === 'string') {