How I modernized an old React carousel app with hooks and styled-components

Amber M Webb — Sat, 02 May 2020 17:57:24 +0000

I am a front end developer. I have been writing front end applications since long before it was called front end. I do not remember how I was adding color and font weight to my HTML back in 2002. I also do not remember when I started using CSS but I do recall my first coding job where I came to hate it. There was no hot reloading back then, so any change that was made to the CSS I had to refresh the browser to see it. Then of course, I had to look in ALL THE BROWSERS (do not get me started on Internet Explorer 7) to make sure the interface looked like it was supposed to. I have had a few colleagues ask me the past few years how I felt about styled components. I had no answer for them except that I hate CSS and I want to go the easiest route to accomplish this necessary evil. I had no desire to learn styled components and would stick to class based styling or CSS modules thank you very much. One of the very best things about using frameworks like Bootstrap or Material UI is that the components are already styled out of the box. Sure yeah, you can customize the styling but you can also just plug them in, pass in your props and focus more on the UI interactions, the architecture and the performance of your application. You know, the stuff that makes coding so much fun.

I recently revisited a little React carousel application that I had built a couple of years ago. It had been sitting in my Github getting very stale and needed quite a bit of freshening up. It was using a much older version of React with class components. I have been riding the React hooks bandwagon for over a year, so it was time to convert it over. It felt awesome to pull out the constructors and lifecycle methods and replace with useState and useEffect hooks.

Here is my original CarouselItem component using class component method:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './Carousel.css'

class CarouselItem extends Component {
  static propTypes = {
    activeIndex: PropTypes.number.isRequired,
    index: PropTypes.number.isRequired,
    item: PropTypes.object.isRequired
  }

  constructor (props) {
    super(props)
    this.state = {
      className: props.index === props.activeIndex ? 'active' : ''
    }
  }

  componentWillReceiveProps (nextProps) {
    const {
      index
    } = this.props

    if (index === nextProps.activeIndex) {
      this.setState({className: 'active'})
    } else {
      this.setState({className: ''})
    }
  }

  render () {
    const { item } = this.props
    const { className } = this.state

    return (
      <li className={`Carousel-item ${className}`}>
        {item}
      </li>
    )
  }
}

export default CarouselItem

Here is my CarouselItem component after updating it to use hooks:

import React, { useEffect, useState } from 'react';
import './Carousel.css';

export default function CarouselItem(props) {
  const { index, activeIndex, item } = props;
  const [className, setClassName] = useState(props.index === props.activeIndex ? 'active' : '');

  useEffect(() => {
    if (index === activeIndex) {
      setClassName('active');
    } else {
      setClassName('');
    }
  }, [index, activeIndex]);

  return (
    <li className={`Carousel-item ${className}`}>
      {item}
    </li>
  );
}

It was looking more modern already! But something was still not quite right. The ugly class names in my elements were bringing it down. Now, the styles are central to the way the carousel behaves. The active images have diplay:block style and fade in to view and the little navigation controls change color when its respective image is active. I was setting the active class name in state in the useEffect hook. I decided it was time to give styled components a go.

Styled components are very easy to use. Run this in your terminal:

npm install --save styled-components

Add this to your React component:

import styled from 'styled-components'

Create a styled element like so:

const MyAwesomStyledComponent = styled.div`
  background: red;
`

Add it like this:

<MyAwesomStyledComponent />

That is what I did! It felt great to delete the stylesheets. There was also an added benefit that was both surprising and delightful. Take a quick look again at my React hooks version of CarouselItem up above and then take a look at CarouselItem with styled components:

import React from 'react';
import styled, {keyframes} from 'styled-components';
import { CarouselItemInterface } from "./types";

const fadeIn = keyframes`
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
`;

const Item = styled.li`
  display: ${(props: CarouselItemInterface) => props.index === props.activeIndex ? 'block' : 'none'};
  animation: ${fadeIn} 2s;
  -moz-animation: ${fadeIn} 2s;
  -webkit-animation: ${fadeIn} 2s;
  -o-animation: ${fadeIn} 2s;
`;

export default function CarouselItem(props: CarouselItemInterface) {
  return (
    <Item {...props}>
      {props.item}
    </Item>
  );
}

Since props are passed into the styled component, I can do my conditional checking for display: block or display: none directly in it! I was able to remove both the useState and useEffect hooks for a much more streamlined component!

My new thoughts on CSS - it is awesome with styled components. My examples are pretty basic and there is much more to learn and use with them. I look forward to creating new projects, and maybe even converting some of my older existing projects, to use styled components.

Do yourself a favor and check it out : https://styled-components.com/

Create a D3 Bar Chart with Different Width Bars

Amber M Webb — Sat, 08 Feb 2020 15:29:51 +0000

Recently, I was asked to develop a bar chart in D3.js. No big deal, right? I have been writing D3 charts for about 6 months and have really enjoyed bringing data to life in applications for end users to consume. D3 has excellent documentation and even better examples that I have used to learn how to build these charts. The problem I ran into with this particular bar chart is the requirements were unlike the past charts. The bars would not be neatly and equally divided amongst the width of the chart and the x axis using scaleBand() function. These particular bars would have varying widths and the total of the bars would equal the max value of the x axis.

I couldn't find any examples that made sense for me, so I tried some things on my own. I used a linear scale for the x axis and set the width of each bar, but the bars were overlapping. After some deep thought and Google-fu, I came across a StackOverflow post that helped get past my mind block. I have to calculate the x attribute of each bar! Aha!

Instead of a lengthy explanation of how and why this works, here is my code example of a bar chart with bars of varying widths https://github.com/amberwebb/d3-charts/blob/master/src/BarChart/index.js

Pay attention to the x attribute. This function takes all of the values (starting from 0) and calculates the x value of each bar. The bars retain their own widths, no overlapping and the total of the bars equals the max value of the x axis. Requirements met!

DEV Community: Amber M Webb

How I modernized an old React carousel app with hooks and styled-components

Create a D3 Bar Chart with Different Width Bars