react-icon-cloud

React Icon Cloud

React component for rendering an interactive img or word cloud on canvas.
View Demo · Report Bug

About

An interactive 3D tag cloud component for React that renders text and images into a interactive 3D tag cloud.

• Built in support for rendering a cloud of Simple Icons with custom fallback color for poor contrast

• Lazy animation of the canvas (pause animation when off screen)

Built With

• TSdx
• TypeScript
• TagCanvas
• Simple Icons

Getting Started

To get a local copy up and running follow these simple steps.

npm i react-icon-cloud

import {IconTag, Cloud, IconCloud, Tag, TagCanvasOptions } from 'react-icon-cloud'

Then use either of the components:

  <Cloud id={'word'} type={'word'} tags={tags1} key={v4()} tagCanvasOptions={options1}/>

  <IconCloud id={'icon'} minContrastRatio={1} iconSize={50} backgroundHexColor={'#fff'} fallbackHexColor={'#000'} tags={tags3} key={v4()} tagCanvasOptions={options1}/>

Example

Tag Canvas Options React Tag Cloud

Roadmap

See the open issues for a list of proposed features (and known issues).

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Teague Stockwell - LinkedIn