react-icon-cloud

React Icon Cloud

React component for rendering an interactive img or word cloud on canvas
Code Sandbox 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 {Cloud, renderSimpleIcon, renderImage, renderText, ICloud} from 'react-icon-cloud'
import jsIcon from "simple-icons/icons/javascript";

const iconTag = renderSimpleIcon({
  icon: jsIcon,
})

const imgTag = renderImg({
  imgProps: {
    src: 'https://openmoji.org/data/color/svg/1F44B.svg',
    alt: 'Globe',
    width: 100,
    height: 100
  },
  aProps: {
    href: 'https://openmoji.org',
    target: '_blank',
    rel: 'noreferrer',
  }
})

const textTag = renderText({
  text: 'hello'
})

const containerProps: ICloud['containerProps'] = {}
const canvasProps: ICloud['canvasProps'] = {}
const cloudProps: ICloud['options'] = {}

<Cloud 
    containerProps={containerProps} 
    canvasProps={canvasProps}
    options={options}
  >
  {iconTag}
  {imgTag}
  {textTag}
</Cloud>

Props

Cloud

name	type	default	description
canvasProps	HTMLAttributes < HTMLCanvasElement > | undefined	{}	Attributes that will be passed to the underlying canvas element
children	Tag[]	[]	Tags rendered using the provided renderers
containerProps	HTMLAttributes < HTMLDivElement > | undefined	{}	Attributes passed to the root div element
id	string | number | undefined	uuid	Should be provided when using SSR
options	IOptions | undefined	{}	https://www.goat1000.com/tagcanvas-options.php

renderImg

Used to create a tag for the Cloud component

name	type	default	description
aProps	HTMLAttributes < HTMLAnchorElement > | undefined	{}	Attributes passed to the underlying anchor element
imgProps	HTMLAttributes < HTMLImageElement > | undefined	{}	Attributes passed to the underlying img element

renderSimpleIcon

Used to create a tag for the Cloud component

name	type	default	description
aProps	HTMLAttributes < HTMLAnchorElement > | undefined	{}	Attributes passed to the underlying anchor element
bgHex	string | undefined	'#fff'	The string hex of the background the icon will be rendered on. Ex: '#fff'. Used to determine if the min contrast ratio for the icons default color will be met
fallbackHex	string | undefined	'#000'	The color of the icon if the minContrastRatio is not met Ex: '#000'
icon	any	undefined	The simple icon object you would like to render. Ex: import icon from "simple-icons/icons/javascript";
imgProps	HTMLAttributes < HTMLImageElement > | undefined	{}	Attributes passed to the underlying img element
minContrastRatio	number | undefined	1	0 - 21 The min contrast ratio between icon and bgHex before the fallbackHex will be used for the icon color
size	number | undefined	42	The size in px of the icon

renderText

Used to create a tag for the Cloud component

name	type	default	description
aProps	HTMLAttributes < HTMLAnchorElement > | undefined	{}	Attributes passed to the underlying anchor element of the icon
text	string	undefined	The text to render

Examples

Tag Canvas Options

Code Sandbox

Dynamically Import Icons With Next.js SSR

Roadmap

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

License

See LICENSE for more information.

Contact

Teague Stockwell - LinkedIn