https://github.com/thangngoc89/bs-ant-design

Bucklescript + ReasonReact binding Ant Design
https://github.com/thangngoc89/bs-ant-design

bucklescript react reason-react reasonml

Last synced: about 2 months ago
JSON representation

Bucklescript + ReasonReact binding Ant Design

• Host: GitHub
• URL: https://github.com/thangngoc89/bs-ant-design
• Owner: thangngoc89
• Created: 2018-01-01T21:28:39.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-01T23:07:07.000Z (over 1 year ago)
• Last Synced: 2024-05-05T13:01:47.803Z (about 2 months ago)
• Topics: bucklescript, react, reason-react, reasonml
• Language: OCaml
• Homepage:
• Size: 160 KB
• Stars: 62
• Watchers: 6
• Forks: 29
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Lists

• awesome-list - bs-ant-design
• awesome-reasonml - bs-ant-design - React Ant design bindings. (Reason / Libraries and Bindings)
• bs-fontawesome - bs-ant-design
• awesome-reasonml - bs-ant-design - React Ant design bindings. (Reason / Libraries and Bindings)

README

        
# bs-ant-design

## Introduction

Bucklescript + ReasonReact binding for [Ant Design](https://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](https://github.com/tiensonqin/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](https://khoanguyen.me/writing-reason-react-bindings-the-right-way/)

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:

```js

// 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](https://ant.design/docs/react/introduce).

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:

```reason

open Antd.Grid;

      

        (ReasonReact.stringToElement("A"))

    

      

        (ReasonReact.stringToElement("B"))

    

```

* Responsive gutter:

```reason

open Antd.Grid;

      

        (ReasonReact.stringToElement("A"))

    

      

        (ReasonReact.stringToElement("B"))

    

      

        (ReasonReact.stringToElement("C"))

    

```

#### ✍️ 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