Skip to content

Instantly share code, notes, and snippets.

Avatar

Fabio Montone fmontone

View GitHub Profile
@fmontone
fmontone / context_example.js
Last active Nov 19, 2020
React Context + Hook (PropTypes)
View context_example.js
import { createContext, useContext } from 'react';
import PropTypes from 'prop-types';
const ExampleContext = createContext();
function ExampleProvider({ children }) {
return (
<ExampleContext.Provider value={}>
{children}
@fmontone
fmontone / checkBrowser.js
Last active Sep 14, 2020
Check if Javascript is running in browser and get User Agent
View checkBrowser.js
const inBrowser = typeof window !== 'undefined';
// CHECK USER AGENT
const UA = inBrowser && window.navigator.userAgent.toLowerCase();
const isIE = UA && /msie|trident/.test(UA);
const isIE9 = UA && UA.indexOf('msie 9.0') > 0;
const isEdge = UA && UA.indexOf('edge/') > 0;
const isAndroid = UA && UA.indexOf('android') > 0;
@fmontone
fmontone / useClikcOutside.tsx
Created Jul 1, 2020
Custom Hook to track click outside given node ref
View useClikcOutside.tsx
import { useEffect } from 'react';
const useClickOutside = (
ref: React.MutableRefObject<HTMLElement>,
handler: (event: MouseEvent | TouchEvent) => void) => {
useEffect(()=>{
const listener = (event: MouseEvent | TouchEvent) => {
if(!ref.current || ref.current.contains(event.target as Node)) {
@fmontone
fmontone / usePrevious.js
Last active Mar 16, 2020
Custom React Hook to save previous state (or undefined as default)
View usePrevious.js
import { useRef, useEffect } from 'react';
/**
* Custom React Hook usePrevious
* @returns ref.current {current: "ANY"}
* @default undefined
* @description It store the previous state when state changes.
* @example const previousState = usePrevios(state)
*/
@fmontone
fmontone / useWindowSize.js
Last active Mar 16, 2020
Custom React hook to get window size and return an object with width and height (window.innerWidth and window.innerHeight)
View useWindowSize.js
import { useState, useEffect } from 'react';
/**
* Custom React Hook useWindowSize
* @returns width: {Number}, height: {Number}
*/
export function useWindowSize() {
const isClient = typeof window === 'object';