Skip to content

Instantly share code, notes, and snippets.

View viclafouch's full-sized avatar
🎯
Focusing

Victor de la Fouchardière viclafouch

🎯
Focusing
View GitHub Profile
@viclafouch
viclafouch / use-clipboard-api.js
Last active November 4, 2023 04:05
A custom React Hook for writing and reading from the modern clipboard API
// 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
viclafouch / use-viewport.js
Last active June 17, 2020 19:17
A custom React Hook for tracking the window width and to get the current viewport.
// 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
viclafouch / styles.css
Last active June 23, 2020 16:43
A custom React Hook to help you implement a "light/dark mode" component for your application.
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
viclafouch / clipboard.js
Last active December 7, 2023 23:10
How to copy an image or a text to clipboard in Javascript (new way !) See https://copy-to-clipboard.now.sh/
// @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