Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Victor de la Fouchardière viclafouch

🎯
Focusing
View GitHub Profile
@viclafouch
viclafouch / scrollTop.js
Created Sep 26, 2021
JavaScript native API for the smooth scrolling.
View scrollTop.js
function scrollTop(nodeElement = window) {
try {
// The new API
nodeElement.scroll({
top: 0,
left: 0,
behavior: 'smooth'
})
} catch (error) {
// For olders browsers
@viclafouch
viclafouch / usePortal.js
Created Dec 18, 2020
A custom React Hook to create a Portal.
View usePortal.js
import { useState, useRef, useEffect, useCallback } from 'react'
import { createPortal } from 'react-dom'
export default function usePortal() {
const [isOpen, setIsOpen] = useState(false)
const portal = useRef(null)
const openPortal = useCallback((callback) => {
if (!portal.current) {
portal.current = document.createElement('div')
@viclafouch
viclafouch / tooltip.jsx
Created Dec 18, 2020
An implementation of a Tooltip Component with React Hooks !
View tooltip.jsx
import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types'
import usePortal from '@viclafouch/usePortal'
import { Styled } from './tooltip.styled'
import styled from 'styled-components'
const Styled = styled.div`
color: #ffffff;
padding: 4px 8px;
font-size: 1rem;
@viclafouch
viclafouch / abort-requests-in-react.js
Last active Oct 9, 2021
A React component that fetching data on mount and avoiding memory leaks on unmount with AbortController
View abort-requests-in-react.js
import React, { useState, useEffect, useCallback } from 'react'
function Posts() {
const [isLoading, setIsLoading] = useState(true)
const [posts, setPosts] = useState([])
const fetchPosts = useCallback(async controller => {
try {
// Imagine that the fetch is going to take 3 seconds to finish
await new Promise(resolve => setTimeout(resolve, 3000))
@viclafouch
viclafouch / designMode.js
Last active Feb 21, 2021
Edit your website in live by using `document.designMode` and killing links
View designMode.js
// Disable anchor links
window.addEventListener('click', event => event.preventDefault(), false)
// Disable click eventlisteners
window.addEventListener("click", event => event.stopPropagation(), true)
// Enable design mode
document.designMode = "on"
View css-lint-anchor.css
/* Prevent unsecure [target="_blank] links */
a[target='_blank']:not([rel~='noopener']):not([rel~='noreferrer']) {
outline: 2px dashed red;
}
@viclafouch
viclafouch / modal.jsx
Last active Dec 22, 2021
An implementation of a Modal Component with React Hooks ! See https://react-modal.viclafouch.vercel.app
View modal.jsx
import React, { useEffect, useImperativeHandle, useState, forwardRef, useCallback } from 'react'
import { createPortal } from 'react-dom'
import './styles.css'
const modalElement = document.getElementById('modal-root')
export function Modal({ children, fade = false, defaultOpened = false }, ref) {
const [isOpen, setIsOpen] = useState(defaultOpened)
const close = useCallback(() => setIsOpen(false), [])
@viclafouch
viclafouch / use-scroll.js
Last active Jun 17, 2020
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({
@viclafouch
viclafouch / use-page-visibility.js
Last active Jun 17, 2020
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)
}
@viclafouch
viclafouch / use-clipboard-api.js
Last active Jun 17, 2020
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'