bs-react-bootstrap's Introduction

bs-react-bootstrap

Introduction

This is BuckleScript bindings for React-Bootstrap

WIP - Feel free to send PR and help improve it.

Installation

With npm:

npm install --save bs-react-bootstrap

With Yarn

yarn add bs-react-bootstrap

Add bs-react-bootstrap to bs-dependencies on your bsconfig.json
Include Bootstrap CSS into your index.html

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous"
>

Note

As you are using React Bootstrap it's not necessary to import any jQuery stuff.

Usage

Please refer to React Bootstrap Documentation for each component Spec.

Some specif patterns:

enums ⏩ polymorphic variants ^{see on sample}

Legend

🔗 Binding
✅ Done
❌ Not implemented yet
⚠️ WIP

🔗 ❌ Alerts
🔗 ❌ Badge
🔗 ❌ Breadcrumb
🔗 ❌ Buttons
🔗 ❌ Button Group
🔗 ❌ Cards
🔗 ❌ Carousel
🔗 ❌ Dropdowns
🔗 ❌ Forms
🔗 ❌ Input Group
🔗 ❌ Images
🔗 ❌ Figures
🔗 ❌ Jumbotron
🔗 ❌ List Group
🔗 ❌ Modal
🔗 ⚠️ Navs
🔗 ✅Navbar
🔗 ❌ Overlays
🔗 ❌ Pagination
🔗 ❌ Popovers
🔗 ❌ Progress
🔗 ❌ Table
🔗 ❌ Tabs
🔗 ❌ Tooltips

Sample: Navbar

open ReactBootstrap;

let component = "App" |> ReasonReact.statelessComponent;

let make = _children => {
  ...component,
  render: _self =>
    <div className="App container">
      <Navbar fixed=`top fluid=true collapseOnSelect=true>
        <Navbar.Brand>
          <a href="/">
            {string("Scratch")}
          </a>
        </Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse>
          <Nav pullRight=true>
            <Nav.Item href="signup">
              {string("Sign Up")}
            </Nav.Item>
            <Nav.Item href="login">
              {string("Log In")}
            </Nav.Item>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Routes />
    </div>,
};

Recommend Projects