Simplifying React state and styled components

I've been in the middle of a course going through how to create a cryptocurrency dashboard, which has been great for learning new tricks regarding the organization of React Components, and how to structure their code in an organized, efficient fashion. Mainly, how to deal with state, and how to re-use common styles that will be used throughout the coding process.

One thing that the application wanted to do was check to see if this was a visitors first time visiting the application, and this was achieved by setting a state object as "first visit". Our state in its current form is:

this.state = {
      page: "settings",
      ...checkFirstVisit()
    }

You can see, I have no "firstVisit" attribute currently, only a checkFirstVisit function, prefixed by the ... spread operator. This is because with checkFirstVisit, we want to update more than one state attribute. 'checkFirstVisit' was implemented like this:

const checkFirstVisit = () => {
  let cryptoDashData = localStorage.getItem('cryptoDash')
  if(!cryptoDashData){
    return {
      firstVisit: true,
      page: 'settings'
    }
  }
  return {}
}

Here we check for a localStorage item that indicates we've been here before, if it exists, then the checkFirstVisit function returns an empty object, leaving state unchanged. However, should it not be present, we return two attributes to update our state with, firstVisit which sets to true, and the page attribute, which is set to 'settings', indicating what page we should land on. So now, first time visitors will always be directed to settings, all we had to do was make sure that every time state is loaded, we run checkFirstVisit, which is done by including it in the state. I've been trying to implement the spread operator more into my code, along with functions like this to set states based on certain requirements.

I've also been trying to make my code more friendly by not repeating myself, especially in the design department. Here in this application, i had several styles that i wanted to re-use, and instead of using styled components and re-writing every time i wanted a color, or shadow, I instead added a Style.js, which included several exports for styles I would be re-using.

export const fontColorGreen = `color: #03A9F4`;
export const lightBlueBackground = `background-color: #061a44`;
export const subtleBoxShadow = `box-shadow: 0px 0px 5px 1px #121d5b`;
export const greenBoxShadow = `box-shadow: 0px 0px 4px 2px #5fff17`;
export const redBoxShadow = `box-shadow: 0px 0px 2px 2px #e41111`;

Now these styles can be imported into the desired component like so:

import {subtleBoxShadow, lightBlueBackground, greenBoxShadow} from './Style';

and once I created a styled component, i could implement them into the code to style said components like this:

const CoinTile = styled.div `
  ${subtleBoxShadow}
  ${lightBlueBackground}
  padding: 10px;
  &:hover{
      cursor: pointer;
      ${greenBoxShadow}
  }
`

Now anytime i need any of those styles, i can simply call upon them using ${} within any of my styled components, all i need to do is import them from my style.js folder. This leaves my code more organized, easier to edit and debug across the board. That's all for now, adios!

Top comments (2)

Anna Simoroshka • Nov 5 '18 • Edited

I usually use styled-components theme provider and keep all colors and reusable settings in one theme file. And if I am planning to change themes at some point, I don't name colors by their color name but rather by the function in the application (brand, accent, background, etc.)