@sdv-studio/bs-rsuite-ui-react v1.0.5

ReasonML bindings for Rsuite UI React library

Official overview (bindings according it)

p.s bindings from an enthusiast 🙂

Plans

1. Cover all documented components ✅
2. Compare with official GitHub repo in progress
3. Check TODOs, fixes
4. Improve DX (reuse, variants instead string as possible and etc.)

Roadmap

✅ = done 🌓 = not full support (temp) 🛑 = unimplemented

Installation

I. Add bs-rsuite-ui-react binding as dependency

yarn add "https://github.com/shurygindv/bs-rsuite-ui-react.git"
or
yarn add @sdv-studio/bs-rsuite-ui-react

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",
        ...,
        "@sdv-studio/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')|}];

Usage

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"),
   ()
 ));

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("An")}
    </div>
  </RsuiteUi.Animation.Bounce> 

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>

Caveats

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 />

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

And many other useful details about Reason React here! See: https://github.com/reasonml/reason-react/tree/master/docs

Good luck! 🙂