ReasonML bindings for Rsuite UI React library
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
- Cover all documented components β
- Compare with official GitHub repo
- Check TODOs, fixes β
- Example project β
- Improve DX (reuse, variants instead string as possible and etc.) β
- Tests, codegen
β
= done
π = not full support (temp)
π = unimplemented
Type | Component | Status |
---|---|---|
General | <Button /> ; <ButtonGroup /> |
β |
General | <Icon /> ; <IconButton /> |
β |
General | <Tooltip /> |
β |
General | <Popover />;<Whisper /> |
β |
General | Alert module |
β |
General | Notification module |
β |
General | <Message /> |
β |
General | <Loader /> |
β |
General | <Modal /> |
β |
General | <Drawer /> |
β |
General | <Alert /> |
β |
General | <Divider /> |
β |
General | <Progress /> |
β |
General | <Placeholder /> |
β |
:-: | ------------------------------------ | |
Navigation | <Dropdown /> |
β |
Navigation | <Nav /> |
β |
Navigation | <Navbar /> |
β |
Navigation | <Sidenav /> |
β |
Navigation | <Steps /> |
β |
Navigation | <Pagination /> |
β |
Navigation | <Breadcrumb /> |
β |
:-: | ------------------------------------ | :-: |
Data Entry | <Form /> |
π |
Data Entry | <ControlLabel /> |
β |
Data Entry | <FormGroup /> |
β |
Data Entry | <FormControl /> |
β |
Data Entry | <HelpBlock /> |
β |
Data Entry | <Checkbox /> |
β |
Data Entry | <Radio /> ; <RadioGroup /> |
β |
Data Entry | <Input /> |
β |
Data Entry | <InputNumber /> |
β |
Data Entry | <AutoComplete /> |
β |
Data Entry | <Toggle /> |
β |
Data Entry | <InputPicker /> |
β |
Data Entry | <TagPicker /> |
β |
Data Entry | <SelectPicker /> |
β |
Data Entry | <CheckPicker /> |
β |
Data Entry | <Toggle /> |
β |
Data Entry | <TreePicker /> |
β |
Data Entry | <CheckTreePicker /> |
β |
Data Entry | <Cascader /> |
β |
Data Entry | <MultiCascader /> |
β |
Data Entry | <DatePicker /> |
β |
Data Entry | <DateRangePicker /> |
β |
Data Entry | <Slider /> |
β |
Data Entry | <Uploader /> |
β |
:-: | ------------------------------------ | :-: |
Data Display | <Avatar /> |
β |
Data Display | <Badge /> |
β |
Data Display | <Table /> + Cell/Column/Header |
β |
Data Display | <Tree /> |
β |
Data Display | <CheckTree /> |
β |
Data Display | <Panel /> |
β |
Data Display | <Timeline /> |
β |
Data Display | <Tag />;<TagGroup/> |
β |
Data Display | <List /> |
β |
Data Display | <Calendar /> |
β |
Data Display | <Carousel /> |
β |
:-: | ------------------------------------ | :-: |
Layout | <Grid /> ; <Row /> ; <Col /> |
β |
Layout | <FlexboxGrid /> |
β |
Layout | <Container /> |
β |
:-: | ------------------------------------ | :-: |
Utils | <Animation /> |
β |
Utils | <Portal /> |
β |
Utils | Schema module |
π |
Utils | DOMHelper module |
β |
:-: | ------------------------------------ | :-: |
Undocumented | <SafeAnchor /> |
β |
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:
...
"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
[%bs.raw {|require('rsuite/lib/styles/index.less')|}];
or as plain CSS
[%bs.raw {|require('rsuite/dist/styles/rsuite-default.css')|}];
All bindings are in RsuiteUi
namespace, let's try! Some examples
Notification
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
let item = RsuiteUi.RsuiteTypes.DataItemType.make(
~value = "value",
~label = React.string("value"),
()
);
<RsuiteUi.CheckPicker data={[|item|]} />
Animation
let (isVisible, setVisibility) = React.useState(_ => false);
React.useEffect0(_ => {
Js.Global.setTimeout(_ => {
setVisibility(_ => true);
}, 200);
None
});
<RsuiteUi.Animation.Bounce
_in={isVisible}
>
<div>
{React.string("look at me")}
</div>
</RsuiteUi.Animation.Bounce>
Table
let items = [|{
"name": "some name",
"description": "some description"
}, {
"name": "some name",
"description": "some description"
}|];
// where `dataKey` is keyof items (<Table.Cell dataKey={..}>)
RsuiteUi.(
<Table
height={420}
data={items}
onSortColumn={(sortColumn, _sortType) => {
Js.log(sortColumn);
}}
>
<Table.Column width={50} align=`center>
<Table.HeaderCell>
{React.string("Name")}
</Table.HeaderCell>
<Table.Cell dataKey="name" />
</Table.Column>
<Table.Column width={100} flexGrow={2}>
<Table.HeaderCell>
{React.string("Description")}
</Table.HeaderCell>
<Table.Cell dataKey="description" />
</Table.Column>
</Table>
);
Modal
<RsuiteUi.Modal show={true}>
<RsuiteUi.Modal.Header>
{React.string("Header")}
</RsuiteUi.Modal.Header>
<RsuiteUi.Modal.Title>
{React.string("Title")}
</RsuiteUi.Modal.Title>
<RsuiteUi.Modal.Body>
{React.string("Body")}
</RsuiteUi.Modal.Body>
<RsuiteUi.Modal.Footer>
{React.string("Footer")}
</RsuiteUi.Modal.Footer>
</RsuiteUi.Modal>
I. Next components: <MultiCascader />
, <Cascader />
, <DatePicker />
, Notification module
have _open prop instead open
Example:
<MultiCascader _open={true} />
<Cascader _open={true} />
<DatePicker _open={true} />
Notification._open(...); // instead Notification.open()
II. _in instead in prop
<RsuiteUi.Animation.Bounce _in={isVisible} />
<RsuiteUi.Animation.Transition _in={isVisible} />
<RsuiteUi.Animation.Slide _in={isVisible} />
III. Similar situation with <FlexboxGrid />
; Sometimes we would be to use prop justify
with end value, but we should use end_ instead
Example
<FlexboxGrid justify=`end_ />
<FlexboxGrid justify=`spaceAround />
<FlexboxGrid justify=`center />
It would be great, make our world better! All contributions are welcomed.
1. How can we pass Component
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: reasonml/reason-react#406 comments
3. How can we pass string as child?
- Use
React.string("example")
instead"example"
4. What _type
, _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 reasonml/reason-react#475
5. 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! π