You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Decoupled the `tippy` CSS from the package. This will improve future versioning of the project, and is also the recommendation set by the `tippy` project. Tooltips with this new versions might look off without CSS styles, but not considering this a breaking change because you can easily add the following imports to address the issue:
9
+
10
+
```js
11
+
import'tippy.js/dist/tippy.css';
12
+
import'tippy.js/animations/scale.css'
13
+
```
14
+
15
+
Some rarely used typings are no longer exported (e.g. `Enter`, `Spiral`, `WordToStringCallback`, `WordEventCallback`, `MinMaxPair`, `AttributeValue`). While this is a breaking change, taking the liberty to assume this as non-breaking in an effort to constrain the exposed typings for improved future versioning of the project.
Copy file name to clipboardexpand all lines: docs/common-issues.mdx
+80-14
Original file line number
Diff line number
Diff line change
@@ -3,21 +3,76 @@ name: Common Issues
3
3
route: /common-issues
4
4
---
5
5
6
-
import { Playground } from"docz";
7
-
import { useMemo, useState } from"react";
6
+
import { Playground } from'docz';
7
+
import { useMemo, useState } from'react';
8
8
9
-
importReactWordcloudfrom"~/src";
10
-
11
-
importwordsfrom"./words";
9
+
importReactWordcloudfrom'./react-wordcloud';
10
+
importwordsfrom'./words';
12
11
13
12
# Common Issues
14
13
15
14
## Re-rendering issues
16
15
17
-
It is a common scenario that
18
-
`react-wordcloud` will unintentionally re-render (i.e. grow from the center) when the `size`, `callbacks`, `options` props are updated. Note that `react-wordcloud` is **unopinionated** about this rendering behavior since this is the default React behavior, namely that changes in props will re-render the component.
19
-
20
-
You should instead try to define these props statically (e.g. outside of the component) or memoize them accordingly. The comparison example below shows how to avoid this issue with `useMemo`.
16
+
Various props for `react-wordcloud` such as `size`, `callbacks`, `options` are array/object-based. A common mistake in React components is to declare these conveniently as literal prop values:
17
+
18
+
```js
19
+
functionMyWordcloud() {
20
+
return (
21
+
<ReactWordcloud
22
+
options={{
23
+
fontFamily:'courier new',
24
+
fontSizes: [10, 20],
25
+
}}
26
+
size={[400, 300]}
27
+
/>
28
+
)
29
+
}
30
+
```
31
+
32
+
When your component re-renders, the array/object literal props are always initialized as new instances, and this causes the underlying `react-wordcloud` component to re-render as props have changed (React behavior). To avoid this situation, either declare these prop values outside of your component, or memoize them:
33
+
34
+
```js
35
+
constsize= [400, 300];
36
+
constoptions= {
37
+
fontFamily:'courier new',
38
+
fontSizes: [10, 20],
39
+
};
40
+
41
+
functionMyStaticWordcloud() {
42
+
return (
43
+
<ReactWordcloud
44
+
options={options}
45
+
size={size}
46
+
/>
47
+
)
48
+
}
49
+
```
50
+
51
+
```js
52
+
import { useMemo } from'react';
53
+
54
+
functionMyMemoizedWordcloud() {
55
+
constsize=useMemo(() => {
56
+
return [400, 300];
57
+
}, []); // add dependencies to useMemo where appropriate
58
+
59
+
constoptions=useMemo(() => {
60
+
return {
61
+
fontFamily:'courier new',
62
+
fontSizes: [10, 20],
63
+
}
64
+
}, []); // add dependencies to useMemo where appropriate
65
+
66
+
return (
67
+
<ReactWordcloud
68
+
options={options}
69
+
size={size}
70
+
/>
71
+
);
72
+
}
73
+
```
74
+
75
+
Here is a playground that illustrates the difference between memoizing th;e `size` prop.
21
76
22
77
<Playground>
23
78
{() => {
@@ -29,9 +84,9 @@ You should instead try to define these props statically (e.g. outside of the com
29
84
<buttononClick={() =>setIteration(iteration+1)}>
30
85
Click to re-render
31
86
</button>
32
-
<h3>Will re-render because the "size" prop is always recreated</h3>
87
+
<h3>Will re-render because the 'size' prop is always recreated</h3>
33
88
<ReactWordcloudsize={size}words={words} />
34
-
<h3>Will not re-render because the "size" prop is memoized</h3>
89
+
<h3>Will not re-render because the 'size' prop is memoized</h3>
@@ -74,3 +129,14 @@ If you see this console warning, it is recommended that you address it in the fo
74
129
- Increase the wordcloud size (either using the `size` prop or the parent container).
75
130
- Reduce the `options.fontSizes` values.
76
131
- Avoid rendering long words at vertical angles (i.e. 90 degrees). Browser heights are more limited than widths, and the long words may not fit within the wordcloud height. You can control rotation angles using `rotationAngles` and `rotations` in the `options` props.
132
+
133
+
## Typescript errors
134
+
Common typescript issues are frequently experienced when working with `Scale`, `Spiral`, `MinMaxPair` types where providing literal number arrays or strings will cause the TS compiler to complain. Most of these are type aliases (e.g. `[number, number]` and `'linear' | 'log' | 'sqrt'`) and you can resolve these issues by type-asserting them e.g.
0 commit comments