sandeshdamkondwar

import React, { useEffect, useState, useRef } from "react";

// Helpers
import { debounce, generateCols, getNoOfCols } from "../../helpers/";

// Hooks
import { useInifiniteScroller } from "../../hooks/useInfiniteScroller";

// Defs
import { IGifItem } from "../../defs/interfaces";

sandeshdamkondwar

{
  "name": "webpack-and-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

sandeshdamkondwar

{
  "name": "setting_up_webpack4",
  "version": "1.0.0",
  "description": "setting up webpack4",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start:dev": "webpack-dev-server"
  },
  "repository": {

sandeshdamkondwar

import React, { useState, useMemo } from 'react'

function Counter() {
	const [counterOne, setCounterOne] = useState(0)
	const [counterTwo, setCounterTwo] = useState(0)

	const incrementOne = () => {
		setCounterOne(counterOne + 1)
	}

sandeshdamkondwar

import React, { useReducer, useEffect } from 'react'
import axios from 'axios'

const initialState = {
	loading: true,
	error: '',
	post: {}
}

const reducer = (state, action) => {

sandeshdamkondwar

html[data-theme='dark'] {
  --text-color: #f0F0F0;
  --background-body: #1C1C1C;
  --other-var: #111111;
}

html[data-theme='light'] {
  --text-color: #111111;
  --background-body: #FAFAFA;
  --other-var: #ffffff;

sandeshdamkondwar

// hooks/use-viewport.js
import { useState, useEffect } from 'react'

export const MOBILE = 'MOBILE'
export const TABLET = 'TABLET'
export const DESKTOP = 'DESKTOP'

const getDevice = width => {
  if (width < 768) return MOBILE
  else if (width < 992) return TABLET

sandeshdamkondwar

// hooks/use-clipboard-api.js
import { useState, useCallback } from 'react'

function useClipboardApi() {
  const [content, setContent] = useState(null)

  const askPermission = useCallback(async queryName => {
    try {
      const permissionStatus = await navigator.permissions.query(queryName)
      return permissionStatus.state === 'granted'

sandeshdamkondwar

// hooks/use-page-visibility.js
import { useState, useLayoutEffect } from 'react'

function usePageVisibility() {
  const [isPageVisible, setIsPageVisible] = useState(!document.hidden)

  useLayoutEffect(() => {
    const handleVisibility = () => {
      setIsPageVisible(!document.hidden)
    }

sandeshdamkondwar

// hooks/use-scroll.js
import { useEffect, useRef, useCallback, useState } from 'react'

function useScroll({ threshold = 450, isWindow = false, smooth = true } = {}) {
  const [isAtBottom, setIsAtBottom] = useState(false)
  const ref = useRef(isWindow ? window : null)

  const goTop = useCallback(() => {
    const element = ref.current
    element.scrollTo({