https://github.com/malesch/semantic-reagent
Library for using Semantic UI React components with Reagent
https://github.com/malesch/semantic-reagent
clojurescript react reagent semantic-ui
Last synced: 8 months ago
JSON representation
Library for using Semantic UI React components with Reagent
- Host: GitHub
- URL: https://github.com/malesch/semantic-reagent
- Owner: malesch
- License: epl-1.0
- Created: 2017-02-09T13:30:44.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-09-19T13:12:41.000Z (over 6 years ago)
- Last Synced: 2025-10-22T00:06:06.985Z (8 months ago)
- Topics: clojurescript, react, reagent, semantic-ui
- Language: Clojure
- Size: 1.96 MB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# semantic-reagent
A Clojure library for using [Semantic UI React](http://react.semantic-ui.com) with [Reagent](http://reagent-project.github.io/).
[](https://clojars.org/malesch/semantic-reagent)
[](https://cljdoc.org/d/malesch/semantic-reagent/CURRENT)
## Usage
```clojure
(:require '[reagent.core :as r]
'[semantic-reagent :as sui])
(defn- sidebar []
(let [visible (r/atom false)
on-click (fn [] (reset! visible (not @visible)))]
(fn []
[:div
[sui/Button {:on-click on-click} "Toggle"]
[sui/SidebarPushable {:as sui/jsSegment}
[sui/Sidebar {:as sui/jsMenu
:animation "push"
:icon "labeled"
:inverted true
:visible @visible
:vertical true
:width "thin"}
[sui/MenuItem {:as "a"}
[sui/Icon {:name "home"}]
"HOME"]
[sui/MenuItem {:as "a"}
[sui/Icon {:name "gamepad"}]
"Games"]]
[sui/SidebarPusher
[sui/Segment {:basic true}
[sui/Header {:as "h3"} "Content"]
[sui/Image {:src "https://react.semantic-ui.com/images/wireframe/paragraph.png"}]]]]])))
(defn- main-component []
[:<>
[sui/Container
[sidebar]]])
(defn main []
(r/render [main-component] (.getElementById js/document "app")))
```
More usage examples of the UI components can be found in the Devcards when starting up in dev mode.
For building [Leiningen](https://leiningen.org) is required.
The dev mode is started with
```
$ lein repl
user=> (fig-start)
[Figwheel] Compiling build dev to "target/public/js/main.js"
[Figwheel] Successfully compiled build dev to "target/public/js/main.js" in 0.636 seconds.
[Figwheel] Watching paths: ("src" "dev") to compile build - dev
[Figwheel] Starting Server at http://localhost:9500
Opening URL http://localhost:9500
nil
user=>
```
then opening http://localhost:9500/ automatically.
## License
Copyright © 2017 Marcus Spiegel
Distributed under the Eclipse Public License either version 1.0 or (at
your option) any later version.