1
\$\begingroup\$

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.

\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

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.

\$\endgroup\$
1
  • \$\begingroup\$ It's a mix of styling and functionality. For instance: the "back" variant should expect a linkTo prop, but the "close" variant could be used on a modal, so that would expect a callback function. I think a solution like you posted may be a better. I have also considered taking an approach similar to how it is handled in iOS's UIKit. You call the UINavigationBar and you set the backBarButtonItem. I could achieve this using a backButton prop that expects a component, and pass it either a link, or a button for instance. Thanks for the input! \$\endgroup\$
    – Nitsew
    Nov 30, 2018 at 17:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.