@fortawesome/react-fontawesome#FontAwesomeIcon TypeScript Examples

BottomNav: React.FC<IBottomNavProps> = (props) => (
    <div>
        <nav
            className="fixed bottom-0 w-full hidden sm:flex items-center justify-between bg-darkblue-100 h-16 z-30">
            <div className="px-4 flex items-center">
                <Link to="add-node"
                    className="flex items-center text-white hover:text-blue-500 transition mr-8">
                    <FontAwesomeIcon icon="plus-circle" className="mr-2" />
                    <span className="font-semibold text-sm">Add your node</span>
                </Link>
                <a href={props.joinURL}
                    className="flex items-center text-white hover:text-blue-500 transition mr-8"
                    target="_blank">
                    <FontAwesomeIcon icon="code-branch" className="mr-2" />
                    <span className="font-semibold text-sm">Join testnet</span>
                </a>
            </div>
            <div
                className="px-4 flex items-center font-semibold text-sm text-grey-600">
                <a href="https://github.com/Alethio/eth2stats-client/issues"
                    className="mr-8 flex items-center text-grey-600 hover:text-blue-500 transition"
                    target="_blank">
                    <FontAwesomeIcon icon="exclamation-circle" className="mr-2" />
                    <span className="font-semibold text-sm">Report issues</span>
                </a>
                <div className="flex items-center">
                    <span className="mr-2">powered by </span>
                    <a href="https://aleth.io"
                        className="text-grey-600 hover:text-blue-500 transition"
                        target="_blank">Aleth.io</a>
                </div>
            </div>
        </nav>
    </div>
)

Sidebar =() =>  {
        return (
            <div className={classNames("bg-none", "border-right")} id="sidebar-wrapper">
                <div className="sidebar-heading">TutorBase</div>
                <ListGroup>
                    <ListGroupItem tag="a" href="/home" className={classNames("list-group-item", "bg-none", "tab-active")}><FontAwesomeIcon icon={faAddressBook} />Schedule a Session</ListGroupItem>
                    <ListGroupItem tag="a" href="/home/meetings" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faCalendar} />Upcoming Meetings</ListGroupItem>
                    <ListGroupItem tag="a" href="/home/history" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faHistory} />History</ListGroupItem>
                    <ListGroupItem tag="a" href="/home/settings" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faCog} />Settings</ListGroupItem>
                </ListGroup>
                <ListGroup className="list-group-bottom">
                    {/* <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faRandom} />Switch Dashboard</ListGroupItem> */}
                    <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faSignOutAlt} />Logout</ListGroupItem>
                </ListGroup>
            </div>
        );
}

Components = () => (
  <Form withStyles onSubmit={noop}>
    <section>
      <h4> Checkbox </h4>
      <Checkbox>
        Are you sure?
      </Checkbox>
    </section>
    <section>
      <h4> Input with icon </h4>
      <InputWithIcon type="text">
        <FontAwesomeIcon icon={faCheck} />
      </InputWithIcon>
    </section>
    <section>
      <h4> Password reveal </h4>
      <PasswordReveal />
    </section>
  </Form>
)

HamburgerMenu: React.FC<IHamburgerMenu> = ({ expanded, children, onExpand }) => {
  const itemsRef = createRef<HTMLDivElement>();

  const handleOpen = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
    onExpand(!expanded);
    const items = itemsRef.current;
    items?.classList.toggle('open');
  };

  return (
    <HamburgerLayout className="hamburger-menu">
      <Navbar>
        <Link to={urls.pola.home()}>
          <img width="auto" height="100%" src={LogoColor} />
        </Link>
        <FontAwesomeIcon icon={faBars} onClick={handleOpen} className="menu-icon" size="2x" />
      </Navbar>
      <Items ref={itemsRef} className={classNames('nav-items')}>
        {children}
      </Items>
    </HamburgerLayout>
  );
}

function PortfolioSocialLinks({ fellow }: { fellow: Fellow }) {
  const SocialLink = ({ name }: { name: SocialType }) => {
    if (!fellow[name]) return null;
    return (
      <div>
        <a
          href={`${SocialLinks[name]}/${fellow[name]}`}
          target="_blank"
          rel="noreferrer"
        >
          <FontAwesomeIcon
            className="portfolio-social-icon"
            size="lg"
            icon={icons[name]}
            color="#73737D"
          />
        </a>
      </div>
    );
  };

  const socialLinks = Object.keys(SocialLinks).map((socialName, i) => (
    <SocialLink name={socialName as SocialType} key={i} />
  ));

  return (
    <div>
      <div className="portfolio-social-links">{socialLinks}</div>
    </div>
  );
}

render() {
    return (
      <div className="chat-input">
        <input
          onChange={this.changeInput}
          onKeyDown={this.props.autoComplete ? this.tabComplete : (_) => {}}
          placeholder="Enter your message here."
          value={this.state.content}
        ></input>
        <button type="button" onClick={this.props.toggleShowAllMessages}>
          <FontAwesomeIcon icon={this.props.showAllMessages ? faEye : faEyeSlash} />
        </button>
        <button type="submit">
          <FontAwesomeIcon icon={['fas', 'paper-plane']} />
        </button>
      </div>
    );
  }

AlertModal: React.FC<AlertModalProps> = (props) => {
  const {
    isShowing = false,
    onCloseModal,
    title = '',
    message = '',
    children,
  } = props

  return (
    <Container isShowing={isShowing}>
      <Dialog>
        <TitleContainer>
          <Title>{title}</Title>
          <CloseButton onClick={onCloseModal}>
            <FontAwesomeIcon icon="times" />
          </CloseButton>
        </TitleContainer>

        <Message>{message}</Message>

        <Footer>{children}</Footer>
      </Dialog>
    </Container>
  )
}

MarkButton = ({ format, icon }: { format: string; icon: string }) => {
  const editor = useSlate();
  let thisIcon = faBold;
  if (icon === "italic") {
    thisIcon = faItalic;
  } else if (icon === "underlined") {
    thisIcon = faUnderline;
  } else if (icon === "code") {
    thisIcon = faCode;
  }
  return (
    <Button
      active={isMarkActive(editor, format)}
      onMouseDown={(event: any) => {
        event.preventDefault();
        toggleMark(editor, format);
      }}
    >
      <FontAwesomeIcon icon={thisIcon} />
    </Button>
  );
}

ISettings: React.FC<ISetting> = (props: ISetting) => {
  const [value, setValue] = useState(false);

  return ( 
    <div>
      {props.alt ? <div className="settings-banner2"> </div> : false}

      {props.img ?
        <div className="settings-core">
          <div className="item-settings">
              <div className="settings-img-container" style={{background: props.backround}} >
                <FontAwesomeIcon className={props.imgType} icon={props.img} style={{color: props.imgColor}} />
              </div>
              {props.title ? <div className="text-settings">{props.title}</div> : false}
          </div>
        </div>
      : false}
    </div>
  );
}

render() {
        return (
            <div className="button-with-dropdown-component">
                <Button
                    className="main-button"
                    content={this.props.content}
                    icon={this.props.icon}
                    onClick={this.props.onClick}
                />
                <div className="dropdown-container">
                    <Button
                        className="dropdown-button"
                        content={<FontAwesomeIcon icon={faAngleDown} />}
                        onClick={() => {
                            // TODO: Find a better solution than setTimeout
                            const newValue = !this.state.showDropdown;
                            setTimeout(() => {
                                this.setState({
                                    showDropdown: newValue
                                });
                            }, 0);
                        }}
                    />
                    <ContextMenu
                        show={this.state.showDropdown}
                        items={this.props.dropdownItems}
                        onRequestClose={() => this.setState({ showDropdown: false })}
                        width={this.props.dropdownWidth}
                    />
                </div>
            </div>
        );
    }

AccContractCard: React.FC<IProps> = ({ contract, index }) => {

  const [showContractState, setShowContractState] = useState<boolean>(false)

  return <Card className='acc-contract-card'>
    <Card.Body onClick={() => { setShowContractState((prevState) => !prevState) }} key={index}>
      <div>
        <span className='mono'>
          {`${index + 1}) `}
          {<QueryPreservingLink onClick={(e: React.MouseEvent<HTMLAnchorElement>) => { e.stopPropagation() }}
            to={`/address/${hexAddrToZilAddr(contract.address)}`}>
            {hexAddrToZilAddr(contract.address)}
          </QueryPreservingLink>}
        </span>
        <span>
          <FontAwesomeIcon icon={showContractState ? faChevronUp : faChevronDown} />
        </span>
      </div>
    </Card.Body>
    <Collapse in={showContractState}>
      <div>
        <pre className='display-block'>
          {JSON.stringify(contract.state, null, 2)}
        </pre>
      </div>
    </Collapse>
  </Card>
}

RepoItem: React.FC<IRepoItemProps> = ({
  name,
  privateRepo,
  skeleton,
  onClick,
}) => {
  return (
    <div className="deploy-site-item-repo-item" onClick={(e) => onClick()}>
      <div className="deploy-site-item-repo-item-details">
        <div className="deploy-site-item-github-icon">
          <FontAwesomeIcon icon={faGithub} />
        </div>
        <div className="deploy-site-item-github-name">
          {skeleton ? <Skeleton width={220} height={24} duration={2} /> : name}
        </div>
      </div>
      {privateRepo && (
        <span className="deploy-site-item-private">
          <span>
            <FontAwesomeIcon icon={faLock} />
          </span>
          <span>Private</span>
        </span>
      )}
      <span className="deploy-site-item-chevron-right">
        <FontAwesomeIcon icon={faChevronRight} />
      </span>
    </div>
  );
}

OverwriteIcon = ({ overwriteType }: { overwriteType: Buff.ClassRelationOverwriteType }) => {
    switch (overwriteType) {
        case Buff.ClassRelationOverwriteType.OVERWRITE_MORE_THAN_TARGET:
            return <FontAwesomeIcon icon={faArrowUp} title="OVERWRITE_MORE_THAN_TARGET" />;
        case Buff.ClassRelationOverwriteType.OVERWRITE_LESS_THAN_TARGET:
            return <FontAwesomeIcon icon={faArrowDown} title="OVERWRITE_LESS_THAN_TARGET" />;
        default:
            return <></>;
    }
}

export function CommentForm(props) {
  const [postingStatus, setPostingStatus] = useState(false)
  const commentBodyRef = useRef() as any
  const { parent_reflink } = props

  const postComment = useCallback(async () => {
    setPostingStatus(true)
    const [networkId, parent_author, parent_permlink] = (RefLink.parse(parent_reflink) as any).link
    const [reflink, finishOpt] = await AccountService.postComment({
      accountType: 'hive',
      body: commentBodyRef.current.value,
      parent_author,
      parent_permlink,
      username: 'sisy',
      permlink: `re-${parent_permlink}-${randomstring
        .generate({
          length: 8,
          charset: 'alphabetic',
        })
        .toLowerCase()}`,
      title: '',
      json_metadata: {},
    })
    if (typeof props.onCommentPost === 'function') {
      props.onCommentPost()
    }
    commentBodyRef.current.value = ''
    setPostingStatus(false)
  }, [parent_reflink])
  return (
    <>
      <textarea
        id="new-comment-body"
        className="form-control w-100"
        ref={commentBodyRef}
        placeholder="Comment here..."
        maxLength={25000}
      ></textarea>
      <button
        id="new-comment-btn"
        className="btn mt-1 btn-primary float-right"
        disabled={postingStatus}
        onClick={postComment}
      >
        {postingStatus ? <FontAwesomeIcon icon={faSpinner as any} spin /> : <span>Comment</span>}
      </button>
    </>
  )
}

MapTooltipContent = (props: IMapTooltipContentProps) => {

    const { store, marker } = props; // useStores();

    let count = 0;
    return (
        <React.Fragment>
            <p className="text-white mb-2">
                <strong>{marker.city}</strong>
            </p>
            {marker.clients.map((client: IClient) => {
                count++;
                if (count > shownClients) {
                    if (count === 4 && marker.clients.length - shownClients > 0) {
                        return (
                            <p key="end" className={`text-grey-500 mt-1`}>
                                plus {marker.clients.length - shownClients} more clients...
                            </p>
                        );
                    }
                    return null;
                }
                return (
                    <div key={client.id}>
                        <div className="flex flex-initial items-center">
                            <div className="mr-2 w-4 text-center">
                                <FontAwesomeIcon icon="network-wired" className="mr-2" />
                            </div>
                            <p className={`text-alethio-green`}>{client.name}</p>
                        </div>
                        <div className="flex flex-initial items-center mb-1">
                            <div className="mr-2 w-4 text-center">
                                <FontAwesomeIcon icon="cube" />
                            </div>
                            <p className={`w-16 marker ${SlotDelayStatus(
                                client.latestHead.headSlot,
                                store.stats.currentSlot
                            )}`}>
                                {client.latestHead.headSlot}
                            </p>
                            <FontAwesomeIcon icon="users" className="mr-2" />
                            <p className={`marker ${PeersStatus(client.peers)}`}>
                                {client.peers}
                            </p>
                        </div>
                    </div>
                );
            })}
        </React.Fragment>
    );
}

export default function AudioPlayer({ title, src, className } : Props) {
  const ref = useRef<HTMLAudioElement>(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const onPlay = () => { setIsPlaying(true); };
  const onPause = () => { setIsPlaying(false); };

  const togglePlay = () => {
    const { paused } = ref.current;

    if (paused) {
      ref.current.play();
    } else {
      ref.current.pause();
    }
  };

  const stop = () => {
    ref.current.pause();
    ref.current.currentTime = 0;
  };

  useEffect(() => {
    ref.current.addEventListener('play', onPlay);
    ref.current.addEventListener('pause', onPause);

    return () => {
      ref.current.removeEventListener('play', onPlay);
      ref.current.removeEventListener('pause', onPause);
    };
  }, []);

  return (
    <div className={`${styles['audio-player']} ${className} d-flex align-items-center`}>
      <Button onClick={togglePlay} className={styles['play-button']}>
        <FontAwesomeIcon icon={isPlaying ? faPause : faPlay} />
      </Button>
      <Button className={`${styles['stop-button']}${isPlaying ? ` ${styles['stop-button--visible']}` : ''}`} onClick={stop}>
        <FontAwesomeIcon icon={faStop} />
      </Button>
      <p title={title} className="text-white">{title}</p>
      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
      <audio ref={ref} src={src} hidden />
    </div>
  );
}

render() {
    const { seconds } = this.state;
    const { isPlaying } = this.props;

    return (
      <div className="settings-form" onSubmit={() => null}>
        <AvalonScrollbars>
          <form autoComplete="off">
            <FontAwesomeIcon
              icon={faExclamation}
              className="unnecessarily-huge-exclamation-mark blue"
            />
            <h1>ARE YOU READY?</h1>
            <h2>GAME IS ABOUT TO START</h2>
            {isPlaying ? (
              <p className="center">
                Confirm that you are ready to start the game. You have {seconds} seconds
                left.
              </p>
            ) : (
              <p className="center">
                Waiting for players to confirm. {seconds} seconds remaining.
              </p>
            )}
            <div className="buttons">
              <button
                className="bt-cancel"
                type="button"
                onClick={isPlaying ? this.sendFalse : this.props.onExit}
              >
                <FontAwesomeIcon icon={faTimes} />
              </button>
              {isPlaying ? (
                <button className="bt-accept" type="button" onClick={this.sendTrue}>
                  <FontAwesomeIcon icon={faCheck} />
                </button>
              ) : null}
            </div>
          </form>
        </AvalonScrollbars>
      </div>
    );
  }

DifficultyChooser: React.FC = () => {
  const dispatch = useDispatch()
  const history = useHistory()

  const themeType = useTypedSelector(({ Theme }) => Theme.type)

  const selectedDifficulty = useTypedSelector(
    ({ GameConfig }) => GameConfig.difficulty,
  )

  const onSelectDifficulty = (difficulty: number) => (): void => {
    const action = setGameConfig({ difficulty })
    dispatch(action)
  }

  const onPlay = (): void => {
    history.push('/game')
  }

  const onSwitchThemes = (): void => {
    const isUsingDark = themeType === ThemeTypes.dark
    const newThemeType = isUsingDark ? ThemeTypes.light : ThemeTypes.dark
    const action = setTheme({ type: newThemeType })
    dispatch(action)
  }

  return (
    <Container>
      <MenuContainer>
        <AppName>React Memory Game</AppName>

        <MenuContent>
          <DifficultyLabelContainer>
            <DifficultyLabel>
              <DifficultyLabelTitle>Choose a Difficulty:</DifficultyLabelTitle>
              <DifficultyLabelSubtitle>
                Each difficulty changes the number of cards
              </DifficultyLabelSubtitle>
            </DifficultyLabel>

            <SwitchThemesButton onClick={onSwitchThemes} title="Trocar Temas">
              <FontAwesomeIcon icon="palette" />
            </SwitchThemesButton>
          </DifficultyLabelContainer>

          <DifficultyContainer>
            <Difficulty
              name="Easy"
              numOfCards={DIFFICULTIES.EASY}
              onClick={onSelectDifficulty(DIFFICULTIES.EASY)}
              isSelected={selectedDifficulty === DIFFICULTIES.EASY}
            />
            <Difficulty
              name="Medium"
              numOfCards={DIFFICULTIES.MEDIUM}
              onClick={onSelectDifficulty(DIFFICULTIES.MEDIUM)}
              isSelected={selectedDifficulty === DIFFICULTIES.MEDIUM}
            />
            <Difficulty
              name="Hard"
              numOfCards={DIFFICULTIES.HARD}
              onClick={onSelectDifficulty(DIFFICULTIES.HARD)}
              isSelected={selectedDifficulty === DIFFICULTIES.HARD}
            />
            <Difficulty
              name="Very hard"
              numOfCards={DIFFICULTIES.VERY_HARD}
              onClick={onSelectDifficulty(DIFFICULTIES.VERY_HARD)}
              isSelected={selectedDifficulty === DIFFICULTIES.VERY_HARD}
            />
          </DifficultyContainer>

          <PlayButtonContainer>
            <PlayButton onClick={onPlay}>Play</PlayButton>
          </PlayButtonContainer>
        </MenuContent>
      </MenuContainer>
    </Container>
  )
}

Nav = () => {
  const [showMenu, setShowMenu] = useState(false);
  const { width } = useWindowDimensions();

  const getMobileMenu = () => {
    if (width <= 768) {
      return (
        <FontAwesomeIcon
          onClick={onClickToggle}
          icon={faBars}
          size="lg"
          className="nav-mobile-menu"
        />
      );
    }
    return null;
  };

  const onClickToggle = (e: React.MouseEvent<Element, MouseEvent>) => {
    setShowMenu(!showMenu);
  };

  const onRequestClose = (
    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>
  ) => {
    setShowMenu(false);
  };

  return (
    <React.Fragment>
      <ReactModal
        className="modal-menu"
        isOpen={showMenu}
        onRequestClose={onRequestClose}
        shouldCloseOnOverlayClick={true}
      >
        <SideBarMenus />
      </ReactModal>
      <nav>
        {getMobileMenu()}
        <strong>SuperForum</strong>
      </nav>
    </React.Fragment>
  );
}

function ComponentForIconName(faIconName: IconName, className="", styling={}): JSX.Element {
    _initFontAwesome();
    return (<FontAwesomeIcon className={className} icon={faIconName} style={styling} />);
}

Icon: React.FC<FontAwesomeIconProps> = ({ ...props }) => <FontAwesomeIcon {...props} />

function MenuItemMobile({
  expanded,
  selectAccordion,
  classes,
  title,
  icon,
  layersCategories,
}: MenuItemMobileProps) {
  const { t } = useSafeTranslation();
  const handleChange = (panel: string) => (
    event: React.ChangeEvent<{}>,
    newExpanded: boolean,
  ) => {
    selectAccordion(newExpanded ? panel : '');
  };

  return (
    <Accordion
      key={title}
      square
      elevation={0}
      expanded={expanded === title}
      onChange={handleChange(title)}
    >
      <AccordionSummary
        expandIcon={<FontAwesomeIcon icon={faCaretDown} />}
        IconButtonProps={{ color: 'inherit', size: 'small' }}
        aria-controls={title}
        id={title}
      >
        <img className={classes.icon} src={`/images/${icon}`} alt={title} />
        <Typography variant="body2">{t(title)}</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Grid container direction="column">
          {layersCategories.map(({ title: categoryTitle, layers, tables }) => (
            <MenuSwitch
              key={categoryTitle}
              title={categoryTitle}
              layers={layers}
              tables={tables}
            />
          ))}
        </Grid>
      </AccordionDetails>
    </Accordion>
  );
}

render() {
        return (
            <FontAwesomeIcon
                icon={this.props.icon}
                className="button-icon-component"
            />
        );
    }

LabelStar: React.FC<IProps> = ({ type }) => {

  const location = useLocation()
  const networkUrl = useNetworkUrl()
  const networkName = useNetworkName()

  const userPrefContext = useContext(UserPrefContext)
  const { labelMap, setLabelMap } = userPrefContext!

  const currPath = useMemo(() => (location.pathname + location.search), [location])
  const [isLit, setIsLit] = useState(Object.keys(labelMap).includes(currPath))
  const [show, setShow] = useState(false)

  const handleCloseModal = () => setShow(false)
  const handleShowModal = () => setShow(true)

  useEffect(() => {
    setIsLit(Object.keys(labelMap).includes(currPath))
  }, [labelMap, currPath])

  const addLabel = (labelName: string) => {
    const newLabelInfo: LabelInfo = {
      name: labelName,
      type: type,
      networkUrl: networkUrl,
      networkName: networkName,
      timeAdded: Date.now()
    }
    setLabelMap({ ...labelMap, [currPath]: newLabelInfo })
    handleCloseModal()
  }

  const removeLabel = useCallback(() => {
    const temp = { ...labelMap }
    delete temp[currPath]
    setLabelMap(temp)
  }, [labelMap, setLabelMap, currPath])

  return (
    <>
      {labelMap[location.pathname + location.search]
        ? <span className='label-name subtext'>
          ({labelMap[location.pathname + location.search].name})
          </span>
        : null}
      <span className='star-span' >
        <FontAwesomeIcon onClick={isLit ? removeLabel : handleShowModal} color='grey'
          className={isLit ? 'star-filled-icon' : 'star-outline-icon'}
          icon={isLit ? faStarFilled : faStarOutline} size='xs' />
        <LabelModal show={show} handleCloseModal={handleCloseModal} addLabel={addLabel} />
      </span>
    </>
  )
}