@sdv-studio/bs-rsuite-ui-reactdeprecated

Reason(React) bindings for Rsuite UI library

Usage no npm install needed!

<script type="module">
  import sdvStudioBsRsuiteUiReact from 'https://cdn.skypack.dev/@sdv-studio/bs-rsuite-ui-react';
</script>

README

ReasonML bindings for Rsuite UI React library

npm version

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

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 />
:-: ------------------------------------ :-:
Layout <Grid />; <Row />; <Col />
Layout <FlexboxGrid />
Layout <Container />
:-: ------------------------------------ :-:
Utils <Animation />
Utils <Portal />
Utils DOMHelper module
:-: ------------------------------------ :-:
Undocumented <SafeAnchor />

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?

2. What the different between ReasonReact.string and React.string?

3. How can we pass string as child?

  • Use React.string("example") instead "example"

4. What _type, _open, _val, _in mean as Component prop?

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

Good luck! 🙂