react3dtagcloud_withclick

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