Skip to content

Instantly share code, notes, and snippets.

View viclafouch's full-sized avatar
🎯
Focusing

Victor de la Fouchardière viclafouch

🎯
Focusing
View GitHub Profile
@viclafouch
viclafouch / tooltip.jsx
Created December 18, 2020 10:52
An implementation of a Tooltip Component with React Hooks !
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 / usePortal.js
Created December 18, 2020 10:53
A custom React Hook to create a Portal.
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 / scrollTop.js
Created September 26, 2021 12:35
JavaScript native API for the smooth scrolling.
function scrollTop(nodeElement = window) {
try {
// The new API
nodeElement.scroll({
top: 0,
left: 0,
behavior: 'smooth'
})
} catch (error) {
// For olders browsers
@viclafouch
viclafouch / forward-ref.ts
Created August 2, 2023 08:33
Redesign of forwardRef in TS
import React, { forwardRef } from "react";
// Declare a type that works with
// generic components
type FixedForwardRef = <T, P = {}>(
render: (props: P, ref: React.Ref<T>) => React.ReactNode
) => (props: P & React.RefAttributes<T>) => React.ReactNode;
// Cast the old forwardRef to the new one
export const fixedForwardRef =