Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Sandesh Damkondwar sandeshdamkondwar

🏠
Working from home
View GitHub Profile
@sandeshdamkondwar
sandeshdamkondwar / demo.tsx
Last active Aug 6, 2020
Infinite Scroller React Hook
View demo.tsx
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
sandeshdamkondwar / package.json
Created Jun 18, 2020
Basic Webpack Config for TS setup
View package.json
{
"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
sandeshdamkondwar / package.json
Last active Jun 18, 2020
Minimal webpack setup using babel-loader, scss-loader & file-loader
View package.json
{
"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
sandeshdamkondwar / useMemoHookDemo.js
Last active Jun 18, 2020
useMemo hook for avoiding unnecessary renderings of child components
View useMemoHookDemo.js
import React, { useState, useMemo } from 'react'
function Counter() {
const [counterOne, setCounterOne] = useState(0)
const [counterTwo, setCounterTwo] = useState(0)
const incrementOne = () => {
setCounterOne(counterOne + 1)
}
@sandeshdamkondwar
sandeshdamkondwar / FetchUseReducer.js
Last active Jun 18, 2020
Fetch data using useReducer
View FetchUseReducer.js
import React, { useReducer, useEffect } from 'react'
import axios from 'axios'
const initialState = {
loading: true,
error: '',
post: {}
}
const reducer = (state, action) => {
@sandeshdamkondwar
sandeshdamkondwar / styles.css
Created Jun 17, 2020 — forked from viclafouch/styles.css
A custom React Hook to help you implement a "light/dark mode" component for your application.
View styles.css
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
sandeshdamkondwar / use-viewport.js
Created Jun 17, 2020 — forked from viclafouch/use-viewport.js
A custom React Hook for tracking the window width and to get the current viewport.
View use-viewport.js
// 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
sandeshdamkondwar / use-clipboard-api.js
Created Jun 17, 2020 — forked from viclafouch/use-clipboard-api.js
A custom React Hook for writing and reading from the modern clipboard API
View use-clipboard-api.js
// 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
sandeshdamkondwar / use-page-visibility.js
Created Jun 17, 2020 — forked from viclafouch/use-page-visibility.js
A custom React Hook to detect if the page is visible or not.
View use-page-visibility.js
// 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
sandeshdamkondwar / use-scroll.js
Created Jun 17, 2020 — forked from viclafouch/use-scroll.js
A custom React Hook to handle the scroll of a DOM element.
View use-scroll.js
// 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({