charisTheo

document.querySelector('.copy-button').addEventListener('click', async () => {
  const src = document.querySelector('.image-to-copy').src
  try {
    const blob = await getImageBlobFromUrl(src)
    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob
      })
    ])
    alert('Image copied to clipboard!')

charisTheo

async function getImageBlobFromUrl(url) {
  const fetchedImageData = await fetch(url)
  const blob = await fetchedImageData.blob()
  return blob
}

charisTheo

export async function copyToClipboard (text) {
  try {
    // try to use Clipboard API
    await navigator.clipboard.writeText(text);
    return true
  } catch (_) {
    // Clipboard API is not supported
    const el = document.createElement('textarea')
    el.value = text
    document.body.appendChild(el)

charisTheo

const isSafari = () => navigator.vendor.match(/apple/i) &&
   !navigator.userAgent.match(/crios/i) &&
   !navigator.userAgent.match(/fxios/i) &&
   !navigator.userAgent.match(/Opera|OPT\//);

charisTheo

import React, { useState } from 'react'

const Button = () => {
  const [ LazyComponent, setLazyComponent ] = useState(null)

  const loadLazyComponent = async () => {
    if (LazyComponent !== null) {
      return
    }

charisTheo

const LoadablePlugin = require('@loadable/webpack-plugin')
exports.onCreateWebpackConfig = ({ actions, plugins }) => {
  actions.setWebpackConfig({
    plugins: [new LoadablePlugin()]
  })
}
import loadable from '@loadable/component'

export default function Page(props) {
  const LazyComponent = loadable(() => import(`../components/lazyComponent.js`))

charisTheo

{typeof window !== 'undefined' && (
  <React.Suspense fallback={<Loading />}>
    <LazyThing />
  </React.Suspense>
)}

charisTheo

import dynamic from 'next/dynamic'
const NavMenu = dynamic(
  () => import('./NavMenu'),
  { loading: () => <p>Loading...</p> }
)

function Header() {
  const [showMenu, setShowMenu] = useState(false)

  return (

charisTheo

import React from 'react'
import { 
  BrowserRouter as Router, 
  Switch 
} from 'react-router-dom'

const HomePage = React.lazy(() => import('./Pages/Home'))
const LoginPage = React.lazy(() => import('./Pages/Login'))

export default function () {

charisTheo

import(/* webpackChunkName: "NavMenu" */ './NavMenu')