Reason(React) bindings for Rsuite UI library
npm install bs-rsuite-ui-react
Official overview (bindings according it)
p.s bindings from an enthusiast š
Deprecated: ~~https://www.npmjs.com/package/@sdv-studio/bs-rsuite-ui-react~~
use npm i bs-rsuite-ui-react instead npm i @sdv-studio/bs-rsuite-ui-react
1. Cover all documented components ā
2. Compare with official GitHub repo
3. Check TODOs, fixes ā
4. Example project ā
5. Improve DX (reuse, variants instead string as possible and etc.) ā
6. Tests, codegen
ā
= done
š = not full support (temp)
š = unimplemented
| Type | Component | Status |
| :----------: | ------------------------------------ | :----: |
| General | ;
| General |
| General |
| General |
| General | Alert module | ā
|
| General | Notification module | ā
|
| General |
| General |
| General |
| General |
| General |
| General |
| General | | ā
|
| General |
| :-: | ------------------------------------ | |
| Navigation |
| Navigation | | ā
|
| Navigation |
| Navigation |
| Navigation |
| Navigation |
| Navigation |
| :-: | ------------------------------------ | :-: |
| Data Entry | | š |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry | | ā
|
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| Data Entry |
| :-: | ------------------------------------ | :-: |
| Data Display |
| Data Display |
| Data Display |
| Data Display |
| Data Display |
| Data Display |
| Data Display |
| Data Display |
| Data Display |
| Data Display |
| Data Display |
| :-: | ------------------------------------ | :-: |
| Layout |
| Layout |
| Layout |
| :-: | ------------------------------------ | :-: |
| Utils |
| Utils |
| Utils | Schema module | š |
| Utils | DOMHelper module | ā
|
| :-: | ------------------------------------ | :-: |
| Undocumented |
I. Add bs-rsuite-ui-react binding as dependency
``
npm i bs-rsuite-ui-react
or
yarn add bs-rsuite-ui-react
or
yarn add "https://github.com/shurygindv/bs-rsuite-ui-react.git"
II. Also we need to say bsb: heey, look! Seems, bs-rsuite-ui-react perfectly complements you, let's add it to bs-dependencies
...somewhere in your bsconfig.json:
`reason`
...
"bs-dependencies": [
"reason-react",
...,
"bs-rsuite-ui-react"
],
...
III. We would be to see a sea of colors, sky and sun, there are two ways to achieve it, import:
LESS
`reason`
[%bs.raw {|require('rsuite/lib/styles/index.less')|}];
or as plain CSS
`reason`
[%bs.raw {|require('rsuite/dist/styles/rsuite-default.css')|}];
All bindings are in RsuiteUi namespace, let's try! Some examples
Notification
`reason
RsuiteUi.Notification._open(props); // props is RsuiteUi.Notification.Props.t
RsuiteUi.Notification.closeAll();
RsuiteUi.Notification.success(RsuiteUi.Notification.Props.make(
~title = React.string("I'm title"),
~description = React.string("I'm desc"),
~placement="bottomStart",
()
));
`
CheckPicker
`reason
let item = RsuiteUi.RsuiteTypes.DataItemType.make(
~value = "value",
~label = React.string("value"),
()
);
`
Animation
`reason
let (isVisible, setVisibility) = React.useState(_ => false);
React.useEffect0(_ => {
Js.Global.setTimeout(_ => {
setVisibility(_ => true);
}, 200);
None
});
>
Table
reason
let items = [|{
"name": "some name",
"description": "some description"
}, {
"name": "some name",
"description": "some description"
}|]; // where
dataKey is keyof items ()
RsuiteUi.(
data={items}
onSortColumn={(sortColumn, _sortType) => {
Js.log(sortColumn);
}}
>
center>
{React.string("Name")}
{React.string("Description")}
);
``
Modal
`reason
{React.string("Header")}
{React.string("Title")}
{React.string("Body")}
{React.string("Footer")}
`Caveats
I. Next components:
, , , Notification module have \_open prop instead openExample:
`reason
Notification._open(...); // instead Notification.open()
`II. \_in instead in prop
reason
`III. Similar situation with
; Sometimes we would be to use prop justify with end value, but we should use end\_ insteadExample
`reason
end_ />
spaceAround />
center />
``Contributions
It would be great, make our world better!
All contributions are welcomed.
FAQ (just to save time...)
1. How can we pass
as prop?- Put it in a separate function
- See: https://github.com/reasonml/reason-react/blob/master/docs/component-as-prop.md
2. What the different between
ReasonReact.string and React.string?- They are the same (aliases), prefer
React.string
- See: https://github.com/reasonml/reason-react/issues/406 comments3. How can we pass string as child?
- Use
instead "example"4. What
, _open, _val, _in mean as Component prop?- are reserved in Reason/Ocaml (aliases
type, open` and so on),
- See: https://bucklescript.github.io/docs/en/object
and https://github.com/reasonml/reason-react/issues/4755. Why do we use an array structure instead of a immutable list everywhere?
- ReasonML lists are represented as nested 2-element arrays in JavaScript (an encoding of cons pairs).
And many other useful details about Reason React here!
See: https://github.com/reasonml/reason-react/tree/master/docs
Good luck! š