Options

You can customize many visual and layout properties of react-wordcloud by using the options prop.

Colors

react-wordcloud will randomnly apply colors from an array of color hex codes.

react-wordcloud randomly positions and rotates words by default. If options.deterministic is true, react-wordcloud will produce the same positioning/rotation/color for a provided input. You can also provide a randomSeed string value to control the random seed behavior. Try resizing the wordcloud up and down in the example below to see the deterministic behavior.

Font Styles

Configure word font styles using the fontFamily, fontSizes, fontStyle, fontWeight options.

Rotations

By default react-wordcloud will apply random rotations if the rotations option is not specified. If rotations option is specified, it will use evenly-divided angles from the rotationAngles option based on the rotations value. The following example demonstrates common rotation angles of wordcloud layouts

Layout

Configure the wordcloud layout by using the scale, spiral options.

Attributes

You can set custom attributes on the svg or text nodes by using the svgAttributes or textAttributes. You can either use a string or a function returning a string from a Word as values for attributes. You may also override the existing attributes that are set by the wordcloud algorithm. These features are demonstrated in the example below.

Interactive

Use the Playground to edit and play around with some of these options!