Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2019-08-24

Channels

#reagent
<
2019-08-24
>
Lone Ranger00:08:15

@neo2551 I've never used the context API but it looks like this might address it: https://github.com/Lokeh/reagent-context

David Pham07:08:19

I will try. My issue is there are some mutability in the JavaScript package that are not reflected in reagent. But let’s see

roti11:08:35

does anybody have a suggestion for an autocomplete component (input, with autocomplete functionality)?

Lone Ranger17:08:54

If you’re not all that familiar with webpack you can go with re-com although I’ve found it to be a little glitchy sometimes but it’s the easiest to incorporate

valtteri11:08:16

I'd start with html5 datalist and see how far you can get with it. 

(defonce app-state (atom {}))

(defn autocomplete [{:keys [items on-change]}]
  [:<>
   [:input {:type "text" :list "id-123" :on-change on-change}]
   [:datalist {:id "id-123"}
    (for [item items]
      [:option {:key item :value item}])]])

(defn hello-world []
  [:div
   [:h1 "Datalist demo"]
   [autocomplete
    {:items     ["cat" "dog" "sheep" "chicken" "whale"]
     :on-change #(swap! app-state assoc :selected-item (-> % .-target .-value))}]

   [:h3 (str "Selected item: " (or (:selected-item @app-state) "-"))]])
If this is not enough then you should look into react-select, react-autosuggest or downshift components. They offer bunch of functionality but the downside is that they're quite complex.