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

html[data-theme='dark'] {
  --text-color: #f0F0F0;
  --background-body: #1C1C1C;
  --other-var: #111111;
}

html[data-theme='light'] {
  --text-color: #111111;
  --background-body: #FAFAFA;
  --other-var: #ffffff;

viclafouch

// hooks/use-viewport.js
import { useState, useEffect } from 'react'

export const MOBILE = 'MOBILE'
export const TABLET = 'TABLET'
export const DESKTOP = 'DESKTOP'

const getDevice = width => {
  if (width < 768) return MOBILE
  else if (width < 992) return TABLET

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

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

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

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

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

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

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