3DTagCloud

基于 react 的 3d 标签云, 在线 demo

原作者地址：https://github.com/crazylxr/3d-tag-cloud-for-react 在此基础上将标签参数改为了对象数组并添加了点击事件以满足自己项目需要
感谢crazylxr

Installation

npm install react3dtagcloud_withclick --save

Usage

import React from "react";
import TagCloud from "react3dtagcloud";

class Demo extends React.Component {
  handleClick(tag) {
    alert(`id:${tag.id};name:${tag.name}`);
  }

  render() {
    let tagName = [
      { id: "java", name: "java" },
      { id: "javscript", name: "javscript" },
      { id: "C", name: "C" },
      { id: "C++", name: "C++" },
      { id: "fe", name: "前端" },
      { id: "React", name: "React" },
      { id: "Vue", name: "Vue" },
      { id: "redux", name: "redux" },
      { id: "writing", name: "写作" },
      { id: "programmer", name: "程序员" },
      { id: "programme", name: "编程" }
    ];
    tagName = [...tagName, ...tagName, ...tagName];

    return (
      <div
        style={{
          width: "300px",
          height: "300px",
          padding: "100px"
        }}
      >
        <TagCloud
          tagName={tagName}
          radius={200}
          onClick={this.handleClick}
        ></TagCloud>
      </div>
    );
  }
}

API

对于标签云可以设置一些自定义属性，具体如下：

| 属性 | 说明 | 类型 | 默认值 | | ------- | ------------ | ------------------- | ------ | | tagName | 标签数组 | Array<string> | [] | | speed | 球体旋转速度 | number | 10 | | radius | 球的半径 | number | 200 | | url | 前缀 url | string | '' |

License

MIT