Installation Process

[deandrehaijiel]

Hi Teague, DeAndre here. First and foremost, thank you for the effort in building this. It is exactly what I am looking for. However, I do apologise as I am just starting out learning React and I can't seem to get this to work. It shows 'NO TAGS' on my web application. Could we connect and please guide me though the process of getting this to work? Thank you for your kind attention, hope to hear from you soon.

[teaguestockwell]

Hi DeAndre,

I would be happy to help. Do you have a repro of this issue? A code sandbox may be helpful for this.

[deandrehaijiel]

Hi, I am trying to replicate your result here: https://codesandbox.io/s/react-icon-cloud-1xr9h?file=/dynamic-cloud.tsx. The code sandbox is https://codesandbox.io/s/stoic-moon-3rugwv , currently running with error. It is throwing me with "Module '"."' has no exported member 'cloudProps'. Did you mean to use 'import cloudProps from "."' instead?" over at dynamic-cloud.tsx in the skills folder

[teaguestockwell]

Great looking portfolio DeAndre. I hope this helps 😃

Issue

The main reason it was not working originally is because in the example here the syntax is commonly called a named ESM import:

import { cloudProps } from '.' 

It expects the file index.js to export cloudProps like this:

export const cloudProps = {}

This may also be a helpful doc to understand ESM import better.

Fix

here is a working fork of that codesandbox where I

• renamed dynamic-cloud.tsx to dynamic-cloud.js
• removed typescript types from src/Skills/index.js
• removed the broken import and added: const cloudProps = {} to dynamic-cloud.js
• added: import { DynamicCloud } from './dynamic-cloud' to src/Skills/index.js and rendered it using the slugs

TODO

Notice that only one icon is displayed:

This is because the slugs are case sensitive. You can fix this by using the example codesandbox to select your icons, then replace src/Skills/index.js const slugs = [...] with the array below the dropdown:

[deandrehaijiel]

this is amazing! thank you so much!!!

[deandrehaijiel]

Hi, everything is working fine now but i noticed that the Icon Cloud will reload after 1 second after appearing. Any ideas why is that so and how I could eliminate this? CodeSandbox: https://codesandbox.io/s/lingering-cloud-j8hogm

[teaguestockwell]

If you are using the dynamic cloud, then its initial state is to render without icons while they are being fetched.

You may add a loading state (render a spinner instead of the cloud when icons.length === 0) or use static simple icon imports

[deandrehaijiel]

Got it! I decided to make a fade in animation to have a little bit of delay. however, would it be okay if you come up with a static code for what i have? 😅

[teaguestockwell]

If you would like to remove the loading state, please use the example for using the cloud with static imports.

[deandrehaijiel]

thank you!!!