From c3e1c771ac4173d46119e093419c2323951f0185 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= Date: Thu, 17 Nov 2022 16:10:34 +0100 Subject: [PATCH] Fix Next problem with copy Next complains when the server renders something different then the client, therfor we move the differing logic to `useEffect` --- website/src/components/copy.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/website/src/components/copy.js b/website/src/components/copy.js index e622c0f84..a59222717 100644 --- a/website/src/components/copy.js +++ b/website/src/components/copy.js @@ -1,4 +1,4 @@ -import React, { useState, useRef } from 'react' +import React, { useState, useRef, useEffect } from 'react' import Icon from './icon' import classes from '../styles/copy.module.sass' @@ -16,7 +16,11 @@ export function copyToClipboard(ref, callback) { export default function CopyInput({ text, prefix }) { const isClient = typeof window !== 'undefined' - const supportsCopy = isClient && document.queryCommandSupported('copy') + const [supportsCopy, setSupportsCopy] = useState(false) + + useEffect(() => { + setSupportsCopy(isClient && document.queryCommandSupported('copy')) + }, []) const textareaRef = useRef() const [copySuccess, setCopySuccess] = useState(false) const onClick = () => copyToClipboard(textareaRef, setCopySuccess)