Skip to content

React component for rendering an interactive img or word cloud on canvas

License

Notifications You must be signed in to change notification settings

teaguestockwell/react-icon-cloud

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

65 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

license-shield linkedin-shield size-url size-url2 npm-v gh-shield


Logo

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, 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)

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 build 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).

Built With

License

See LICENSE for more information.

Contact

Teague Stockwell - LinkedIn