About

An interactive 3D tag cloud component for React that renders text, images, and simple icons 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 or see the Code Sandbox.

npm i react-icon-cloud

Static icon slugs

import React from 'react'
import {Cloud, renderSimpleIcon} from 'react-icon-cloud'
import js from "simple-icons/icons/javascript"
import nextjs from "simple-icons/icons/nextdotjs"

const icons = [js,nextjs].map((icon) => {
  return renderSimpleIcon({
    icon,
    size: 42,
    aProps: {
      onClick: (e: any) => e.preventDefault()
    }
  })
})

const IconCloud = () => {
  return <Cloud>
    {icons}
    <a>
      hello world
    </a>
    <a
      href="https://emojipedia.org/globe-showing-americas/"
      target="_blank"
      rel="noopener"
    >
      <img
        height="42"
        width="42"
        alt="A globe"
        src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/globe-showing-americas_1f30e.png"
      />
    </a>
  </Cloud>
}

Dynamic icon slugs

import React from 'react'
import {Cloud, renderSimpleIcon, fetchSimpleIcons, SimpleIcon} from 'react-icon-cloud'

const useIcons = (slugs: string[]) => {
  const [icons, setIcons] = React.useState()
  React.useEffect(() => {fetchSimpleIcons(slugs).then(setIcons)}, [])

  if (icons) {
    return Object.values(icons.simpleIcons).map((icon) => renderSimpleIcon({
      icon,
      size: 42,
      aProps: {
        onClick: (e: any) => e.preventDefault()
      }
    }))
  }
  
  return <a>Loading</a>
}

const slugs = [
  'amazonaws',
  'android',
  'androidstudio',
  'antdesign',
  'typescript',
  'vercel',
  'visualstudiocode'
]

const DynamicIconCloud = () => {
  const icons = useIcons(slugs)

  return <Cloud>
    {icons}
  </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 |

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 |

fetchSimpleIcons

Used when you cant statically import simple icons during built time. Calling this will use fetch to get icons for each provided slug. | name | type | default | description | |:----------------:|:-----------------------------------------------:|:---------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------:| | slugs | string[] | | Slugs to fetch svgs and colors for. The return icons may be passed to renderSimpleIcon |

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