A React Navbar Component by Dan on CodePen

A simple, responsive #Navbar using #ReactJS:  @CodePen #Coding

  • I’m going to give it a name of NavComponent because that just makes way too much sense, and inside the render function, toss in an empty (for now) set of tags to wrap around everything else that will go in there: – – And underneath all that I’m going to…
  • This will give my a “hamburger” icon (courtesy of Font Awesome) for smaller screens that need a drop down menu.
  • Since our drop-down menu is contained in the “narrowLinks” className, we’re going to target that in our function: – – And then tell our function to toggle the drop-down based on its current CSS display value: – – And to make the new function work, we need to give our…
  • I obviously don’t want to see both sets of links all the time, and since we’re using mobile-first design, we’re going to set our “navWide” links to hidden: – – And we’re also going to stick our hamburger icon and drop-down links on the left side of the screen, just…
  • And finally a media query to switch between our mobile drop-down menu and our larger screen mode with just a row of our links: – – For a working example, click here.

I use React a lot, and I use navbars a lot, so this was just an obvious one for me. This is nothing extravagant. I’m not using React Router in this example, just some tags. But it is responsive, so that’s fun.
Continue reading “A React Navbar Component by Dan on CodePen”

A React Navbar Component by Dan on CodePen

A simple, responsive #Navbar using #ReactJS:  #Coding

  • I’m going to give it a name of NavComponent because that just makes way too much sense, and inside the render function, toss in an empty (for now) set of tags to wrap around everything else that will go in there:

    And underneath all that I’m going to render the component inside the tags in my index.html:

    Ok, so we have a basic component that renders an empty nav.

  • This will give my a “hamburger” icon (courtesy of Font Awesome) for smaller screens that need a drop down menu.
  • Since our drop-down menu is contained in the “narrowLinks” className, we’re going to target that in our function:

    And then tell our function to toggle the drop-down based on its current CSS display value:

    And to make the new function work, we need to give our and tags inside “navNarrow” an onClick:

    That just about wraps it up.

  • I obviously don’t want to see both sets of links all the time, and since we’re using mobile-first design, we’re going to set our “navWide” links to hidden:

    And we’re also going to stick our hamburger icon and drop-down links on the left side of the screen, just for funsies:

    So by setting our icon to float: left, that’s taken care of.

  • And finally a media query to switch between our mobile drop-down menu and our larger screen mode with just a row of our links:

    For a working example, click here.

I use React a lot, and I use navbars a lot, so this was just an obvious one for me. This is nothing extravagant. I’m not using React Router in this example, just some tags. But it is responsive, so that’s fun.
Continue reading “A React Navbar Component by Dan on CodePen”

SVG icon sets in React with Rollup – Helpful Human – Medium

SVG icon sets in React with Rollup  #icons #svg #design #react #reactjs #reactjs

  • Build a better mousetrapAfter thinking about the problem a while and testing some less than ideal solutions, the Rollup compatible version of Icon.js file looked like this:// The new wayimport Icons from ‘.
  • /Icons’;const IconComponent = Icons[this.props.icon];return {IconComponent IconComponent()};Instead of each SVG being housed in individual React components, every SVG is held within a single file, wrapped in a function, and exported.
  • Each of these functions simply returns an SVG.Exported SVG functionsWe then make all of these functions available by default by adding them to the default export at the end of the file.
  • This pattern allows Rollup to fetch the correct icon with a function call when bundled, and completely bypass the dynamic require from the Webpack configuration.export default { Reply, Search}Icon icon=’Outcome’ color=’black’ size=’small’ /What we end up with, is an icon component that behaves very much like its predecessor but does not rely on Webpack black magic for it to work correctly.While the Webpack implementation still works great, this pattern is a little clearer and only requires you to manipulate a single function to edit, add or remove an SVG.

When I wrote “Embedded SVG icon sets and Reactjs” almost 3 years ago, the way that developers implemented an icon set was considerably different. SVGs were not the most widely used icon types being…
Continue reading “SVG icon sets in React with Rollup – Helpful Human – Medium”