Skip to content
React component for demonstration purposes
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
build
example
src Update dataprocessor.js Mar 9, 2016
test
.babelrc
.editorconfig
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
package.json
webpack.config.js

README.md

react-wordcloud-demo

Build Status Dependencies devDependencies

NOTE: This component is not published. It is just for demonstration purposes.

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
You can’t perform that action at this time.