Simple React + D3 wordcloud component with powerful features

react-wordcloud

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

Sidebar

Prop	Default	Type	Description
topic	null	object	Topic object

Development

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

1. Install dependencies

• npm i
• cd example
• npm i

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

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. Install dependencies

• npm i
• cd example
• npm i

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