21
42%
MIT
@sdv-studio/bs-rsuite-ui-react
1.0.5
deprecatedReason(React) bindings for Rsuite UI library
bindingreactui
homepagerepositorynpmissuesdocumentation

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:

  • RE
  • ML 
  ... 
      "bs-dependencies": [
        "reason-react",
        ...,
        "@sdv-studio/bs-rsuite-ui-react"
    ],
  ...
0: <UNKNOWN SYNTAX ERROR>

III. We would be to see a sea of colors, sky and sun, there are two ways to achieve it, import:

LESS

  • RE
  • ML 
[%bs.raw {|require('rsuite/lib/styles/index.less')|}];
let _ = [%bs.raw {|require('rsuite/lib/styles/index.less')|}]

or as plain CSS

  • RE
  • ML 
[%bs.raw {|require('rsuite/dist/styles/rsuite-default.css')|}];
let _ = [%bs.raw {|require('rsuite/dist/styles/rsuite-default.css')|}]

Usage

All bindings are in RsuiteUi namespace, let's try! Some examples

Notification

  • RE
  • ML 
 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"),
   ()
 ));
2553: <UNKNOWN SYNTAX ERROR>

CheckPicker

  • RE
  • ML 
 let item = RsuiteUi.RsuiteTypes.DataItemType.make(
  ~value = "value",
  ~label = React.string("value"),
  ()
 );
 
 <RsuiteUi.CheckPicker data={[|item|]]} />
3722: <UNKNOWN SYNTAX ERROR>

Animation

  • RE
  • ML 
  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> 
949: <UNKNOWN SYNTAX ERROR>

Modal

  • RE
  • ML 
  <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>
let _ =
  ((RsuiteUi.Modal.createElement ~show:true
      ~children:[((RsuiteUi.Modal.Header.createElement
                     ~children:[React.string "Header"] ())[@JSX ]);
                ((RsuiteUi.Modal.Title.createElement
                    ~children:[React.string "Title"] ())[@JSX ]);
                ((RsuiteUi.Modal.Body.createElement
                    ~children:[React.string "Body"] ())[@JSX ]);
                ((RsuiteUi.Modal.Footer.createElement
                    ~children:[React.string "Footer"] ())[@JSX ])] ())
  [@JSX ])

Caveats

I. Next components: <MultiCascader />, <Cascader />, <DatePicker />, Notification module have _open prop instead open

Example:

  • RE
  • ML 
  <MultiCascader _open={true} />
  <Cascader _open={true} />
  <DatePicker _open={true} />
   
   
   Notification._open(...); // instead Notification.open()
2310: syntax error, consider adding a `;' before

II. _in instead in prop

  • RE
  • ML 
   <RsuiteUi.Animation.Bounce _in={isVisible} />
  
   <RsuiteUi.Animation.Transition _in={isVisible} />
   
   <RsuiteUi.Animation.Slide _in={isVisible} />
2310: syntax error, consider adding a `;' before

III. Similar situation with <FlexboxGrid />; Sometimes we would be to use prop justify with end value, but we should use end_ instead

Example

  • RE
  • ML 
  <FlexboxGrid justify=`end_ />
  <FlexboxGrid justify=`spaceAround />
  <FlexboxGrid justify=`center />
2310: syntax error, consider adding a `;' before

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! 🙂

Project

Made with

Reason