Krdytkyu

I am working on a component for a navigation bar. This navigation bar currently has two variations: a "back" version, and a "close" version.

I have come up with three different implementations but I am uncertain of which one is the best. Currently, I am leaning towards this implementation as it reads the best in my opinion.

const NAVIGATION_BAR_TYPE = {

  back: "back",

  close: "close",

}



const NavigationBar = ({ type = NAVIGATION_BAR_TYPE.back, text, linkTo }) => {

  return (

    <div className={`navigation-button ${type}`}>

      <Link to={linkTo}>{text}</Link>

    </div>

  )

}



NavigationBar.Close = (props) => (

  <NavigationBar { ...props } type={NAVIGATION_BAR_TYPE.close} />

)



NavigationBar.Back = (props) => (

  <NavigationBar { ...props } type={NAVIGATION_BAR_TYPE.back} />

)



// Usage: <NavigationBar.Close linkTo="/" />

This is similar to the first one, but you need to import the object that holds the navigation bar types:

const NAVIGATION_BAR_TYPE = {

  back: "back",

  close: "close",

}



const NavigationBar = ({ type = NAVIGATION_BAR_TYPE.back, text, linkTo }) => {

  return (

    <div className={`navigation-button ${type}`}>

      <Link to={linkTo}>{text}</Link>

    </div>

  )

}



// Usage: <NavigationBar type={NAVIGATION_BAR_TYPE.back} linkTo="/" />

Or this one, leveraging props:

const NavigationBar = ({ back, close, text, linkTo }) => {

  const navigationType = back ? 'back' : 'close'



  return (

    <div className={`navigation-button ${navigationType}`}>

      <Link to={linkTo}>{text}</Link>

    </div>

  )

}



// Usage: <NavigationBar back linkTo="/" />

I don't like the third solution because if I need to add more variations, I feel like it clutters the props. And I don't like the second solution because then you are importing this enum-like object to define the type.

Without knowing the context of how this navigation bar is used in your app its hard to say which one would be more preferable. Does the navigation type dictate only the styling of the navigation bar or also some type of action too? Is the navigation type only tied to some sort of button within the navigation bar that displays differently and points to a different direction? Maybe doing something like this would work for that:

<NavigationBar>

    <NavigationBar.ActionButton type='back' />

</NavigationBar>

All the variants you provided seem like good solutions, I think you are in best judgement here to decide what fits your apps needs.