react3dtagcloud_withclick

1.0.0 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i react3dtagcloud_withclick

Weekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

141 kB

Total Files

10

Last publish

Collaborators

  • jyoketsu