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)
    }

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

// @return Promise<boolean>
async function askWritePermission() {
  try {
    // The clipboard-write permission is granted automatically to pages 
	// when they are the active tab. So it's not required, but it's more safe.
    const { state } = await navigator.permissions.query({ name: 'clipboard-write' })
    return state === 'granted'
  } catch (error) {
    // Browser compatibility / Security error (ONLY HTTPS) ...
    return false

viclafouch

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

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

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

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

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

viclafouch

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

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')