Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shurygindv/bs-rsuite-ui-react
Reason bindings for React Suite UI library
https://github.com/shurygindv/bs-rsuite-ui-react
bs-rsuite-react bucklescript bucklescript-bindings reason reason-react reasonml reasonml-bindings rsuite-react
Last synced: 2 months ago
JSON representation
Reason bindings for React Suite UI library
- Host: GitHub
- URL: https://github.com/shurygindv/bs-rsuite-ui-react
- Owner: shurygindv
- License: mit
- Created: 2019-10-14T18:28:19.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-06T13:30:36.000Z (almost 4 years ago)
- Last Synced: 2024-09-29T18:05:10.906Z (3 months ago)
- Topics: bs-rsuite-react, bucklescript, bucklescript-bindings, reason, reason-react, reasonml, reasonml-bindings, rsuite-react
- Language: Reason
- Homepage:
- Size: 137 KB
- Stars: 27
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ReasonML bindings for [Rsuite UI React library](https://rsuitejs.com)
[](https://badge.fury.io/js/bs-rsuite-ui-react)
[Official overview](https://rsuitejs.com/en/components/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`
## Plans
1. Cover all documented components ✅
2. Compare with official GitHub repo
3. Check TODOs, fixes ⌛
4. [Example project](https://github.com/shurygindv/vote-system-frontend) ✅
5. Improve DX (reuse, variants instead string as possible and etc.) ⌛
6. Tests, codegen
## Roadmap
✅ = 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 | `` + Cell/Column/Header | ✅ |
| 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 | `` | ✅ |
## Installation
**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')|}];
```
## Usage
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
});
{React.string("look at me")}
```
**Table**
```reason
let items = [|{
"name": "some name",
"description": "some description"
}, {
"name": "some name",
"description": "some description"
}|];
// where `dataKey` is keyof items ()
RsuiteUi.(
{
Js.log(sortColumn);
}}
>
{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 **open**
**Example:**
```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\_** instead
**Example**
```reason
```
## Contributions
It would be great, make our world better!
All contributions are welcomed.
## FAQ (just to save time...)
**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: https://github.com/reasonml/reason-react/issues/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 https://github.com/reasonml/reason-react/issues/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!** 🙂