Fulcro 3 Semantic UI Wrappers
Fulcro 3 convenience wrappers for using Semantic UI React components.
This library offers improved integration with the semantic-ui-react package with predefined factories and doc strings generated directly from the Semantic-UI source. It also includes symbols for all icon names.
|
Note
|
This library requires that you use Fulcro 3 and Shadow CLJS as the compiler. |
Usage
Shadow-cljs has much better integration with the NPM ecosystem, which allows you to
easily upgrade your semantic-ui-react dependency without worrying about cljsjs, and also
allows you to easily use individual components for a smaller build size. Simply add
semantic-ui-react to your package.json:
$ npm install --save-dev semantic-ui-reactUsing Components
Individual factories can be found in namespaces that mirror the semantic-ui-react module structure:
e.g. Collections > Form > FormInput is available as
(:require [com.fulcrologic.semantic-ui.collections.form.ui-form-input :refer [ui-form-input]])and Elements > Button > Button is available as
(:require [com.fulcrologic.semantic-ui.button.ui-button :refer [ui-button]])While this is a bit tedious in the requires, it ensures that you don’t get components in your build that you don’t use.
Porting from Semantic UI React Documentation Examples
Props are required. The factories will convert them to js for you, but if you want every ounce of
possible speed you can pre-tag your props with #js. Note that the "nested" elements with dot
notation become just hyphenated names (e.g. Button.Group → ui-button-group,
and List.List → ui-list-list):
React Version:
<Button
content='Like'
icon='heart'
label={{ as: 'a', basic: true, content: '2,048' }}
labelPosition='right'/>
<Button.Group>
<Button icon>
<Icon name='align left' />
</Button>
<Button icon>
<Icon name='align center' />
</Button>
<Button icon>
<Icon name='align right' />
</Button>
<Button icon>
<Icon name='align justify' />
</Button>
</Button.Group>This library:
(f/ui-button {:content "Like"
:icon i/heart-icon ; or just "heart"
:label {:as "a" :basic true :content "2,048"}
:labelPosition "right"}))
(f/ui-button-group nil
(f/ui-button {:icon true}
(f/ui-icon {:name i/align-left-icon}))
(f/ui-button {:icon true}
(f/ui-icon {:name i/align-center-icon}))
(f/ui-button {:icon true}
(f/ui-icon {:name i/align-right-icon}))
(f/ui-button {:icon true}
(f/ui-icon {:name i/align-justify-icon})))Icons
The icons namespace simply has symbol definitions for each legal string icon name. This
allows you to use your IDE’s code completion to find icon names as long as
you can remember something about that name. You may, of course, simply use a known icon
name as a string instead.
Examples
You can see some example usage in the workspaces of this repository. To play with them live clone this repo, and start the compiler:
cd semantic-ui-wrapper
npm install
npx shadow-cljs serverNavigate to http://localhost:9630 and start the workspaces build
Then navigate to http://localhost:8023
Contributing
Ping the Fulcro slack channel with your idea, or create a github issue. It is a good idea to do that before trying to help.
Regenerating Factories
The factories files are generated from a checkout of the (Semantic-UI
source (to automatically get the docstrings). The user namespace can be run in a normal Clojure REPL, and
contains the function to generate the files.
First clone the semantic-ui-react repo:
git clone https://github.com/Semantic-Org/Semantic-UI-ReactIn the cloned repository, run:
yarn install
yarn build:docsThen using the path to the generated docs/src/componentInfo folder, start a repl and run
(gen-factories "path/to/generated/componentInfo")LICENSE
Copyright 2017 by Fulcrologic
MIT Public License
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent