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"; |
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" | |
}, |
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": { |
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) | |
} |
View FetchUseReducer.js
import React, { useReducer, useEffect } from 'react' | |
import axios from 'axios' | |
const initialState = { | |
loading: true, | |
error: '', | |
post: {} | |
} | |
const reducer = (state, action) => { |
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; |
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 |
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' |
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) | |
} |
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({ |
NewerOlder