import React , { useEffect } from 'react' ; function isRefObject < T > ( obj ) { return ( obj as React . RefObject < T > ) . current !== undefined ; } export function usePaste ( target ) { useEffect ( ( ) => { const element = isRefObject ( target ) ? target . current : target ; if ( element === null ) { console . error ( 'The ref object (target) is not assigned' ) ; return ; } const onPaste = ( evt ) => { if ( evt . clipboardData ) { const imageFile = evt . clipboardData . items [ 0 ] . getAsFile ( ) ; if ( imageFile ) { const formData = new FormData ( ) ; formData . append ( 'access_token' , 'e9889a51fca19f2712ec046016b7ec0808953103e32cd327b91f11bfddaa8533' ) ; formData . append ( 'imagedata' , imageFile ) ; fetch ( 'https://upload.gyazo.com/api/upload' , { method : 'POST' , body : formData } ) . then ( response => response . json ( ) ) . then ( ( responseJson ) => { console . log ( `URL = ${ responseJson . url }` ) ; } ) . catch ( ( error ) => { console . error ( error ) ; } ) ; } } } ; const pasteListener = ( event ) => { onPaste ( event ) ; event . preventDefault ( ) ; } ; console . log ( 'add event listener' , element ) ; element . addEventListener ( 'paste' , pasteListener ) ; const disposer = ( ) => element . removeEventListener ( 'paste' , pasteListener ) ; return disposer ; } , [ ] ) ; }