Skip to content

Instantly share code, notes, and snippets.

View fmontone's full-sized avatar

Fabio Montone fmontone

  • São Paulo / Brazil
View GitHub Profile
@fmontone
fmontone / useWindowSize.js
Last active March 16, 2020 01:32
Custom React hook to get window size and return an object with width and height (window.innerWidth and window.innerHeight)
import { useState, useEffect } from 'react';
/**
* Custom React Hook useWindowSize
* @returns width: {Number}, height: {Number}
*/
export function useWindowSize() {
const isClient = typeof window === 'object';
@fmontone
fmontone / usePrevious.js
Last active March 16, 2020 01:30
Custom React Hook to save previous state (or undefined as default)
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 / useClikcOutside.tsx
Created July 1, 2020 14:52
Custom Hook to track click outside given node ref
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 / checkBrowser.js
Last active September 14, 2020 13:11
Check if Javascript is running in browser and get User Agent
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 / context_example.js
Last active November 19, 2020 23:42
React Context + Hook (PropTypes)
import { createContext, useContext } from 'react';
import PropTypes from 'prop-types';
const ExampleContext = createContext();
function ExampleProvider({ children }) {
return (
<ExampleContext.Provider value={}>
{children}