viclafouch

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 =

viclafouch

function scrollTop(nodeElement = window) {
  try {
    // The new API
    nodeElement.scroll({
      top: 0,
      left: 0,
      behavior: 'smooth'
    })
  } catch (error) {
    // For olders browsers

viclafouch

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

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

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

// 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"

viclafouch

/* Prevent unsecure [target="_blank] links */
a[target='_blank']:not([rel~='noopener']):not([rel~='noreferrer']) {
  outline: 2px dashed red;
}

viclafouch

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

// 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

// hooks/use-page-visibility.js
import { useState, useLayoutEffect } from 'react'

function usePageVisibility() {
  const [isPageVisible, setIsPageVisible] = useState(!document.hidden)

  useLayoutEffect(() => {
    const handleVisibility = () => {
      setIsPageVisible(!document.hidden)
    }