Simple React + D3 wordcloud component with powerful features

March 06, 2019 0 Comments

Simple React + D3 wordcloud component with powerful features

 

 

Simple React + D3 wordcloud component with powerful features

Simple React + D3 wordcloud component with powerful features.

NOTE: This component is not published.

Premise

  • The component should be usable within an existing application. No routing needed.
  • The data is already available. No fetching mechanism needed.
  • The component should be distributable as commonjs, umd and es6-module.

Jump to the example!

Installation

Be sure to use the latest version of node.js and npm.
Note: Currently the component is not published via npm.

  1. Install: npm i --save react-wordcloud
  2. Install peerDependencies that are listed in package.json.

Usage / Props

To run the component with the default props, it is enough to include the WordCloud component with some topics:

 <WordCloud topics={topics} />

WordCloud inherits the components Cloud and Sidebar. If you want to be more flexible it is possible to load that components individually:

import { WordCloud, Cloud, Sidebar
} from `react-wordcloud`
... render() { <Cloud fontName={"Impact"} fontSizes={[13, 16, 20, 26, 35, 49]} height={500} onSelectTopic={() => console.log('Topic selected!')} topics={topics} width={500} /> }
... 

WordCloud

Prop Default Type Description
fontName Sans-Serif string Fontname used for the Cloud component
fontSizes [13, 16, 20, 26, 35, 49] int[] Available fontsizes for the Cloud component
height 400 int Height of component
topics [] object[] Content of topics.json
width 400 int Width of component

Cloud

Prop Default Type Description
fontName - string Fontname used for the Cloud component
fontSizes - int[] Available fontsizes for the Cloud component
height - int Height of component
onSelectTopic - function Eventhandler
selectedTopic - object Selected item object
topics - object[] Content of topics.json
width - int Width of component
Prop Default Type Description
topic null object Topic object

Development

To develop the component it is recommend to use the example.

Structure

  • /components:

    • Individual components with isolated markup
    • Could contain each other
    • Rarely have their own state. Better to write as functional components
  • /utils:

    • Functions which are used by some components
    • Could easily be tested


Dependencies

Have a look at the package.json.

Test

  1. Install dependencies: npm i
  2. Run tests: npm test

Example

To run the example, open http://purii.github.io/react-wordcloud-demo/ or follow these steps:

  1. Start webpack-dev-server inside /example, which uses the sources if available: npm start
  2. Open browser: http://localhost:8080/

Publish

  1. Install dependencies: npm i
  2. Build bundles for umd, commonjs and es6-module: npm run bundle
  3. The css file will be located in /dist/wordcloud.min.css
  4. Note the peerDependencies

GitHub


Tag cloud