update dependencies, build and examples

CHANGELOG.md

@@ -3,9 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.4](https://github.com/chrisrzhou/react-wordcloud/compare/v1.0.3...v1.0.4) (2019-03-16)
+
+Improve and simplify React hooks code after detailed understanding of: https://overreacted.io/a-complete-guide-to-useeffect/
+
+Bug fixes:
+
+- Handle words that don't fit in the boundary of the SVG by applying a font-size scale factor
+- Handle large number of words
+
 ## [1.0.3](https://github.com/chrisrzhou/react-wordcloud/compare/v1.0.2...v1.0.3) (2019-03-14)
 
-Bug fixes
+Bug fixes:
 
 - https://github.com/chrisrzhou/react-wordcloud/issues/5
 - https://github.com/chrisrzhou/react-wordcloud/issues/11

README.md

@@ -60,12 +60,12 @@ yarn dev
 ### Codebase Overview
 
 - `index.tsx`: Pure React code that exposes an interface of props.
-- `render.ts`: Pure D3 rendering code to render wordcloud given a valid D3 selection and other data.
-- `hooks.ts`: React hooks that build and destroy responsive SVG containers with D3.
+- `render.ts`: Pure D3 code to render wordcloud given a valid D3 selection and other data.
+- `hooks.ts`: React hooks to construct and resize a responsive SVG container.
 - `types.ts`: Typescript types.
-- `utils.ts`: Various simple functions used to compute derived data.
+- `utils.ts`: Various simple functions to compute derived data.
 
-The code is written in `typescript`, linted with `eslint` + `prettier`, and built with `rollup`. Examples and documentations are built with `docz`.
+The code is written in `typescript`, linted with `eslint` + `prettier`, and bundled with `rollup`. Examples and documentations are built with `docz`.
 
 Feel free to contribute by submitting a pull request.
 

docs/usage/callbacks.mdx

@@ -15,9 +15,9 @@ import words from "./words";
 
 ## Colors and Tooltips
 
-By default, `ReactWordcloud` randomnly applies colors to words using `colors` prop. It also defaults to using the `text` field for rendering tooltips.
+By default, `ReactWordcloud` randomnly applies colors to words using colors from the `colors` prop. It also defaults to using the `word.text` field for rendering tooltips.
 
-In the example below, we can pass custom `getWordColor` and `getWordTooltip` callbacks to update word colors and tooltips in a more data-driven fashion.
+In the example below, we can pass custom `getWordColor` and `getWordTooltip` callbacks to update word colors and tooltips based on the `word` data.
 
 <Playground>
   <ReactWordcloud

docs/usage/options.mdx

@@ -32,8 +32,8 @@ Use the code editor to edit and play around with some of these options!
       fontStyle: "normal",
       fontWeight: "normal",
       padding: 1,
-      rotationAngles: [-90, 90],
       rotations: 3,
+      rotationAngles: [-90, 90],
       scale: "sqrt",
       spiral: "archimedean",
       transitionDuration: 1000

docs/usage/size.mdx

@@ -32,10 +32,8 @@ Provide explicit values with the `size` prop. The wordcloud will no longer respo
 
 ## Minimum size
 
-The `d3-cloud` layout algorithm requires valid `size` and `fontSize` to be provided. Providing a value that is zero or low will incur long and potentially infinite computations.
-
-You can customize the minimum size by adjusting the `minSize` prop. If the provided `size` or resized values are smaller than the `minSize`, it will use the `minSize` value, as demonstrated in the following example:
+You can customize the minimum size by adjusting the `minSize` prop. If the provided `size` or resized values are smaller than the `minSize`, it will use the `minSize` value, as demonstrated in the following example (`minSize = [400, 400]`, `size = [100, 100]`):
 
 <Playground>
-  <ReactWordcloud words={words} minSize={[200, 150]} size={[100, 100]} />
+  <ReactWordcloud words={words} minSize={[400, 400]} size={[100, 100]} />
 </Playground>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-wordcloud",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Simple React + D3 wordcloud component with powerful features.",
   "main": "dist/index.js",
   "module": "dist/index.module.js",
@@ -30,32 +30,35 @@
   },
   "dependencies": {
     "@types/d3": "^5.7.1",
-    "@types/d3-cloud": "^1.2.1",
-    "d3": "^5.9.1",
+    "@types/d3-cloud": "^1.2.2",
+    "d3": "^5.9.2",
     "d3-cloud": "^1.2.5",
     "resize-observer-polyfill": "^1.5.1",
-    "tippy.js": "^4.0.3"
+    "tippy.js": "^4.2.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0-0",
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
-    "@types/react": "^16.8.6",
+    "@types/react": "^16.8.8",
     "@typescript-eslint/eslint-plugin": "^1.4.2",
     "@typescript-eslint/parser": "^1.4.2",
     "bundlesize": "^0.17.0",
     "docz": "^0.13.7",
     "docz-theme-default": "^0.13.7",
-    "eslint": "^5.15.0",
+    "eslint": "^5.15.2",
     "eslint-config-prettier": "^4.1.0",
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-react-hooks": "^1.4.0",
+    "eslint-plugin-react-hooks": "^1.5.1",
     "prettier": "^1.15.3",
-    "react": "^16.8.3",
-    "rollup": "^1.4.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "rollup": "^1.6.0",
     "rollup-plugin-babel": "^4.1.0",
     "rollup-plugin-typescript": "^1.0.0",
+    "tslib": "*",
     "typescript": "^3.3.3333"
   },
   "bundlesize": [

rollup.config.js

@@ -10,9 +10,16 @@ export default [
       typescript(),
     ],
     input: 'src/index.tsx',
-    external: ['d3-cloud', 'react'],
+    external: [
+      'd3',
+      'd3-cloud',
+      'react',
+      'resize-observer-polyfill',
+      'tippy.js',
+    ],
     output: [
       {
+        exports: 'named',
         file: 'dist/index.js',
         format: 'cjs',
       },

src/index.tsx

@@ -29,12 +29,18 @@ export const defaultOptions: Options = {
   transitionDuration: 600,
 };
 
-interface Props {
-  callbacks: Callbacks;
-  minSize: MinMaxPair;
-  maxWords: number;
-  options: Options;
-  size: MinMaxPair;
+export interface Props {
+  /** Callbacks to control various word properties and behaviors (getWordColor, getWordTooltip, onWordClick, onWordMouseOut, onWordMouseOver). */
+  callbacks?: Callbacks;
+  /** Set minimum [width, height] values for the SVG container. */
+  minSize?: MinMaxPair;
+  /** Maximum number of words to display. */
+  maxWords?: number;
+  /** Configure wordcloud with various options (colors, enableTooltip, fontFamily, fontSizes, fontStyle, fontWeight, padding, rotationAngles, rotations, scale, spiral, transitionDuration). */
+  options?: Options;
+  /** Set explicit [width, height] values for the SVG container.  This will disable responsive resizing. */
+  size?: MinMaxPair;
+  /** An array of word.  A word must contain the 'text' and 'value' keys. */
   words: Word[];
 }
 
@@ -45,7 +51,7 @@ function Wordcloud({
   minSize,
   size: initialSize,
   words,
-}: Props): React.ReactNode {
+}: Props): React.ReactElement {
   const [ref, selection, size] = useResponsiveSVG(minSize, initialSize);
 
   // render viz

src/render.ts

@@ -26,7 +26,7 @@ export default function render(
     return getWordColor ? getWordColor(word) : choose(colors);
   }
 
-  // load data
+  // load words
   const vizWords = selection.selectAll('text').data(words);
 
   // enter transition

src/types.ts

@@ -34,7 +34,6 @@ export interface Options {
   rotationAngles: MinMaxPair;
   rotations?: number;
   scale: Scale;
-  size?: MinMaxPair;
   spiral: Spiral;
   transitionDuration: number;
 }

src/utils.ts

@@ -2,12 +2,6 @@ import * as d3 from 'd3';
 
 import { MinMaxPair, Scale, Word } from './types';
 
-export const Scales = {
-  [Scale.Linear]: d3.scaleLinear,
-  [Scale.Log]: d3.scaleLinear,
-  [Scale.Sqrt]: d3.scaleLinear,
-};
-
 export function choose<T = number | string>(array: T[]): T {
   return array[Math.floor(Math.random() * array.length)];
 }
@@ -26,6 +20,11 @@ export function getFontScale(
 ): (n: number) => number {
   const minSize = d3.min(words, (word: Word) => word.value);
   const maxSize = d3.max(words, (word: Word) => word.value);
+  const Scales = {
+    [Scale.Linear]: d3.scaleLinear,
+    [Scale.Log]: d3.scaleLinear,
+    [Scale.Sqrt]: d3.scaleLinear,
+  };
   const fontScale = Scales[scale]()
     .domain([minSize, maxSize])
     .range(fontSizes);