Bucklescript + ReasonReact binding Ant Design
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
code-generator
src
.gitignore
CHANGELOG.md
README.md
bsconfig.json
package-lock.json
package.json

README.md

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