Skip to content

Instantly share code, notes, and snippets.

@pesterhazy

pesterhazy/select.cljs

Last active December 10, 2022 03:17
Show Gist options
  • Save pesterhazy/4a4198a9cc040bf6fe13a476f25bac2c to your computer and use it in GitHub Desktop.
Save pesterhazy/4a4198a9cc040bf6fe13a476f25bac2c to your computer and use it in GitHub Desktop.
Download ZIP
Using react-select with reagent
Raw
select.cljs
;; in your project definition
;; [cljsjs/react-select "1.0.0-rc.1" :exclusions [cljsjs/react]]
;; See react-select documentation: https://github.com/JedWatson/react-select
(ns example.select
(:require [reagent.core :as r]
[cljsjs.react-select]))
(defn select
"Select based on a atom/cursor. Pass as state"
[{:keys [state]
:as props}]
[:> js/Select.Async
(-> props
(dissoc state)
(assoc :value @state
:on-change (fn [x]
(reset! state (if (some-> x .-value))))))])
(defonce !state (atom nil))
(defn load-options [input cb]
;; return sample
(cb nil #js{:options (->> (range 3)
(map (fn [item]
{:value item
:label (str item)}))
clj->js)
:complete true}))
(defn root-ui []
[select {:state !state
:multi true
:load-options load-options}])
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment