Wondering what’s next for npm?Check out our public roadmap! »

    bs-ant-design

    2.1.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i bs-ant-design

    DownloadsWeekly Downloads

    12

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    56.1 kB

    Total Files

    28

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar