0

Context

i'm designing a navigation bar for my application and my proyect uses react-router and react-router-dom for managing routing and react-icons for icon retrieving.

Code

import React from 'react';
import { NavLink } from 'react-router-dom';
import { MdAssessment } from 'react-icons/md'
import Styles from './NavBar.module.css' 

const NavBar = (props) => {

    return (
        <nav className={Styles.navBar}>
            {navIcon}
            <NavLink
                activeStyle={{ color : 'red' }}
                className={`${Styles.navBar__Dashboard} `}
                exact to="/">
                <MdAssessment />
            </NavLink>
            <NavLink
                activeStyle={{ color: 'red'  }}
                className={Styles.navBar__Requests}
                to="/requests">
                Requests
            </NavLink>
            <NavLink
                activeStyle={{ color: 'red'  }}
                className={Styles.navBar__Tasks}
                to="/tasks">
                Tasks
            </NavLink>
        </nav>
    )
}

export default NavBar

Problem

I'm trying to extrapolate activeStyle functionality of NavLink to my icon. Given that react-icons provides you with component as icons, i'm struggling with which approach should i use:

  1. Should i wrapped in a HOC?
  2. Should i encapsulate in a custom Hook?

Notes

I've tried with both approaches but can't get my head arround it. I've tried implementing useRef, useEffect while reading to location with useLocation hook as well. Any suggestion for a better implementation of a generic NavIcon feature taking this context into account?

Community
  • 1
  • 1
Esquilax
  • 43
  • 6
  • 1
    I just tested react-icons on my sandbox, you can see it here [codesandbox](https://codesandbox.io/s/react-use-react-router-dom-4cvov?file=/src/components/Nav.js) and the icons take on the active color. Maybe the problem comes from your CSS. – Cyril Wallis-Davy Jun 10 '20 at 18:07
  • Yeah, i know. I can inherit some properties (if not all) from the father. My issue here is trying to give a totally different style from their parent component. I actually tried by passing the icon componente with extra props, but it didn't feel right – Esquilax Jun 10 '20 at 21:06
  • Sorry, i misunderstood the problem. – Cyril Wallis-Davy Jun 11 '20 at 16:15

1 Answers1

0

By using curly brackets you are importing the icon as a named import. So the import only works if the file contains a named export of the same name you have assigned it. See this question for more info.

According to the package documentation, this is the correct way to import an icon. Can you check to make sure the named export is the same as you have imported?

Taylor Burke
  • 424
  • 4
  • 15
  • Taylor, i have no trouble visualizing the icon, my concern is that i want to "activeSyle" it as i can with the Navlink. I actually did it before implementing react-icons, i hardcoded material-icons className and just rendered a text. In my public HTML file i imported martial icons CDN. I'm now trying to achieve the same, but with react icons, icons are actually components so icons appear to be now children of my NavLinks. – Esquilax Jun 10 '20 at 17:47