Nutella with Pepperoni and Mushrooms

    antd-comment

    0.1.0 • Public • Published

    AntD Comment

    The comment UI component build on ant.design

    version

    0.1.0

    feature

    • support markdown
    • base on ant.design
    • professional interaction

    How to use

    import

    npm install antd-comment

     
    import AntDComment from 'antd-comment';
     
    // the data is from your service
    // please look at the data format
     
    // what the view look like is up to the data.
     
    const data = {
     
      currentUser: {
        avatar: "https://gw.alipayobjects.com/zos/rmsportal/MPYlfjPImtaHFPOvpBVo.png",
        name: 'messi',
        link: 'http://taobao.com',
      },
      
      // comments data
      comments: [
        {
          author: {
            avatar: "https://gw.alipayobjects.com/zos/rmsportal/oFfmyzshSidtkzZZSgea.jpg",
            name: 'kobe',
            link: 'http://taobao.com',
          },
          body: '## hello world',
          like: [],
          top: 0,
          replyAuthor: undefined,
          createdAt: new Date(),
        },
        {
          author: {
            avatar: "https://gw.alipayobjects.com/zos/rmsportal/SJMVsfeiXXnvxvEwgHjy.gif",
            name: '罗纳尔多',
            link: 'http://taobao.com',
          },
          body: 'i want to play a game',
          like: [],
          top: 0,
          replyAuthor: undefined,
          createdAt: new Date(),
        },
        {
          author: {
            avatar: "https://gw.alipayobjects.com/zos/rmsportal/NCRZHCzKeqkcBaKXDPZb.jpg",
            name: 'jordan',
            link: 'http://taobao.com',
          },
          body: '今天晚上去打篮球不',
          like: [],
          top: 0,
          replyAuthor: {
            avatar: "https://gw.alipayobjects.com/zos/rmsportal/SJMVsfeiXXnvxvEwgHjy.gif",
            name: '罗纳尔多',
            link: 'http://taobao.com',
          },
          createdAt: new Date('2017-06-23'),
        }
      ],
      
      // pagination data
      pagination: {
        total: 276,
        current: 1,
        pageSize: 20,
      },
      
      // show the more btn
      more: true,
    }
     
    const App = ()=> <div>
        <AntDComment 
          data={data}
          onComment={()=>{}}
          onDeleteComment={()=>{}}
          onTop={()=>{}}
          onLike={()=>{}}
          onGetMore={()=>{}}
        />
    </div>
     

    DEMO

    demo

    Todo

    0.2.0

    • support like
    • support to top
    • support @
    • support nested comment format

    Keywords

    none

    Install

    npm i antd-comment

    DownloadsWeekly Downloads

    17

    Version

    0.1.0

    License

    ISC

    Last publish

    Collaborators

    • avatar