Resize textarea - reagent-project/reagent-cookbook GitHub Wiki

Challenge: You want a textarea that resizes based on the content

Solution: Use reagent's track and keep track of the number of newlines in the textareas content


(defn count-newlines [a]
  (r/track (fn []
             (count (re-seq #"\n" @a)))))

(defn edit-card []
  (r/with-let [a (r/atom "")
               r (count-newlines a)]
    [:div 
     [:textarea
      {:rows (+ 3 @r)
       :style {:resize "none"
               :width "90%"
               :display "block"
               :margin "auto"
               :overflow "auto"}
       :on-change #(do
                     (reset!
                      a (.. % -target -value)))}]]))