Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 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 (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-01T23:07:07.000Z (about 2 years ago)
- Last Synced: 2024-10-13T11:15:22.591Z (3 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
Awesome Lists containing this project
- awesome-list - bs-ant-design
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