React + wordCloud => Startup

Find a way for the web user to review the keywords of articles easily and fast!

react-wordcloud will be your chiose. The library is a simple React + D3 wordcloud component with powerful features using the d3-cloud layout. Additional, It’s support to multi-language, even Chinese, Japaness

ENV

    # Create React Project 
    npx create-react-app <app-name> --template typescript 

    # Install Lib
    cd <app-name>
    npm i react react-dom react-wordcloud
    npm i ts-node typescript @types/node sass
    npm i d3 d3-transition d3-selection @types/d3 d3-force @types/d3-force recoil @types/recoil

Update App.tsx

// import './App.css'
import WordsCloud from './components/wc'
export default function App() {
  return (
    <main>
      <p>Hi</p>
      <div><WordsCloud /></div>
    </main>
  )
}

Create file: wc.tsx

import React from 'react'
import ReactWordcloud from "react-wordcloud";
import InputBox, { callbackChange } from './inputbox';



const demoData: WordsCloudDataType = [
  {
    text: '地表',
    value: 35,
  },
  {
    text: '污染',
    value: 11,
  },
  {
    text: '風蝕',
    value: 16,
  },
  {
    text: 'Trash',
    value: 17,
  },
  {
    text: '自然景觀',
    value: 10,
  }
];

type WordsCloudPropsType = {
  wordsData?: string
}
type WordsCloudStateType = {
  wordsData: string
}

type WordsCloudDataType = Array<{
  text: string,
  value: number
}>
class WordsCloud extends React.Component<WordsCloudPropsType, WordsCloudStateType> {
  callbacks = {
    getWordColor: (word: any) => (word.value > 50 ? "orange" : "purple"),
    getWordTooltip: (word: any) =>
      `The word "${word.text}" appears ${word.value} times.`
  };
  constructor(props: WordsCloudPropsType) {
    super(props)
    this.state = {
      wordsData: props.wordsData ? props.wordsData : JSON.stringify(demoData)
    }
  }

  callbakOnChange: typeof callbackChange = ((event): void => {
    this.setState({
      wordsData: event.target.value
    })
  })
  parsedWordsString = (s: string): WordsCloudDataType => {
    try {
      return JSON.parse(s) as WordsCloudDataType || demoData
    }
    catch (e) {
      return demoData
    }

  }


  render() {

    return (
      <div>
        <InputBox id="mainInput" initData={JSON.stringify(demoData)} onChange={this.callbakOnChange} showLabel={true} />
        <div style={{ height: 400, width: 600 }}>
          <ReactWordcloud callbacks={this.callbacks} words={this.parsedWordsString(this.state.wordsData)} />
        </div>
      </div>
    )
  }
}
export default WordsCloud