thangngoc89 / bs-ant-design

Bucklescript + ReasonReact binding Ant Design

bs-ant-design

Introduction

Bucklescript + ReasonReact binding for Ant Design components. I write bindings when I needed them in my projects. If you find a component is missing, it's because I don't need it (yet).

Difference from bs-antd : It uses the official recommended way for writing bindings and it doesn't work for me. I explained this in this blog post

I also attempted to rewrite the components when possible for a better integration.

Installation

• With npm:

npm install --save bs-ant-design

• With yarn:

yarn add bs-ant-design

• Add bs-ant-design to bs-dependencies in bsconfig.json.
• You also need to set up your bundler to handle less files (This is a requirement from ant-design)

For webpack, you can do this:

npm install --save-dev less@^2.7.3 less-loader css-loader style-loader

(less@^2.7.3 is the important bit)

Now add this to your webpack config:

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
    }]
}
};

Usage

Please check ant design's documentation for each component.

I tried to keep the API as close to the original JS API as possible.

Some common patterns I used:

• string enums -> polymorphic variants
• function argument accepts different types: GDATs or %identity hack.

Components

Note:

• 🔗: a binding
• ✍️: rewrite in ReasonML
• 🆕: new helpers

Implemented components

🔗 AutoComplete

🔗 Avatar

🔗 Breadcrumb

🔗 Button

🔗 Divider

🔗 Form

🔗 Grid

🔗 Input

🔗 Select

🔗 Steps

Usage:

• Single gutter size in pixels:

open Antd.Grid;

<Row gutter=Row.SingleGutterInPx(4) align=`top>
    <Col span=12 xs=Col.FullColSize(makeColSize(~span=5,()))>  
        (ReasonReact.stringToElement("A"))
    </Col>
    <Col span=8 xs=Col.SingleColSize(4)>  
        (ReasonReact.stringToElement("B"))
    </Col>
</Row>

• Responsive gutter:

open Antd.Grid;

<Row gutter=Row.ResponsiveBreakpoints(makeGutterBreakpoints(~sm=5, ()))>
    <Col span=8>  
        (ReasonReact.stringToElement("A"))
    </Col>
    <Col span=8>  
        (ReasonReact.stringToElement("B"))
    </Col>
    <Col span=8>  
        (ReasonReact.stringToElement("C"))
    </Col>
</Row>

✍️ Icon

This uses IconName

️🆕 IconName

Typesafe way (only way) to access icon's name

🔗 Layout

🔗 Menu

🔗 Radio

🔗 Spin

---

Contributions

All contributions are welcomed.

LICENSE

MIT