Wrapper component that allows you to inspect the properties of its child component, when hovered+ctrl

reagent-inspect.clj

(defn inspect []
  (let [state (r/atom nil)]
    (fn [[c & args]]
      (let [{:keys [hover]} @state]
        [:div {:on-mouse-over #(do
                                 (swap! state assoc :hover (.getModifierState % "Control")))
               :on-mouse-out  #(swap! state assoc :hover false)
               :style         {:display  :inline-block
                               :width    "100%"
                               :height   "100%"
                               :position :relative}}

         (when hover
           [:div {:style {:position         :absolute
                          :left             0
                          :top              0
                          :color            :white
                          :background-color "rgba(0,0,0,0.8)"
                          :z-index          100
                          :width            "100%"
                          :height           "100%"
                          :overflow         :auto}}
            [:pre (with-out-str (clojure.pprint/pprint args))]])
         (vec (cons c args))]))))

;; To use, wrap any component hierarchy with the inspect component, and hover while holding down ctrl
;;
;; (ns my-views
;;   (:require [clojure.pprint]))
;;
;; [inpsect 
;;   [some-component opts]]