Avoiding code duplication in styled components

Ali Gümüş Tosun — Wed, 25 Jan 2023 00:14:32 +0000

Let's say you need to create different elements that have similar style attributes but not the same. Traditional way to do this in CSS is to create a class and give that class to your elements. Then you create different classes, for the different attributes.

It will look like the example below;

styles.css

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 2px solid green;
  border-radius: 6px;
}

.first-box {
  color: red;
}

.second-box {
  color: blue;
}

component.tsx

import React, { Component } from 'react';
import './styles.css';



class Component extends Component {
  render() {
    return (
      <div>
        <div className="box first-box">
          <span>first box</span>
        </div>
        <div className="box second-box">
          <span>second box</span>
        </div>
      </div>
    );
  }
}

And the output;

Now I will show you two different ways to achieve the same goal using styled-components.

Using css`` markup
Inheriting another styled component

1. Using css`` markup

In this example, we will save the shared piece of css values in a variable, and use that variable while we are creating the other components.

component.tsx

import React, { Component } from 'react';
import styled, { css } from 'styled-components';

const boxCss = css`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 2px solid green;
  border-radius: 6px;
`;

const FirstBox = styled.div`
  ${boxCss}
  color: red;
`;

const SecondBox = styled.div`
  ${boxCss}
  color: blue;
`;

class App extends Component {
  render() {
    return (
      <div>
        <FirstBox>
          <span>first box</span>
        </FirstBox>
        <SecondBox>
          <span>second box</span>
        </SecondBox>
      </div>
    );
  }
}

And we have the same visual result.
As you can see, we save the piece of css markup that we want to share in a variable, and use it as a text inside styled component definition.

2. Inheriting another styled component

In this example, we are going to create a component named that will have the shared attributes, and we will inherit this component while creating the other components.

component.tsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import styled, { css } from 'styled-components';

const Box = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 2px solid green;
  border-radius: 6px;
`;

const FirstBox = styled(Box)`
  color: red;
`;

const SecondBox = styled(Box)`
  color: blue;
`;

class App extends Component {
  render() {
    return (
      <div>
        <FirstBox>
          <span>first box</span>
        </FirstBox>
        <SecondBox>
          <span>second box</span>
        </SecondBox>
      </div>
    );
  }
}

As you can see, we still have the same result.

I hope you liked it and it was useful for you. Thank you for reading.

You can follow me on LinkedIn for more content related to web development.

Making a Snake Game Using React Hooks

Ali Gümüş Tosun — Wed, 23 Oct 2019 12:07:54 +0000

First we create our react app.

npx create-react-app my-app

cd my-app

npm start

You can see more about create-react-app here.

We create our SnakeBoard which will be displaying our rows and snake.

and we import and call it on the src/App.js

src/SnakeBoard.js

First we define two dimensional array full of ‘blank’ values.

Then we use useState hook to display blank cells.

useState hooks take a parameter that will set initial value, and returns an array with two values. First is the value which we will be using to access rows data, the second is the function that we will use to change rows value.

We could name them anything and that could work but in order to remember, that is a better way to name them.

Then we map our rows and return blank images for all the blank values.

Our snake board is ready. Now we will create our snake.

So our snake is basically an array of objects. These objects hold snake’s cell’s x and y position.

We will initiate our snake with {x:0, y:0}

const [snake, setSnake] = useState([{x:0,y:0}]);

const displaySnake = () =\> {

const newRows = rows;

snake.forEach(cell =\> {

newRows[cell.x][cell.y]='snake';

})

setRows(newRows);

}

displaySnake will change the rows according to snake’s cell positions.

switch(e) {

case ‘blank’:

return \<img src={Blank}/\>

case ‘snake’:

return \<img src={Snake}/\>

}

We change our switch case in displayRows like this.

We should move our snake. Snake will move according to direction.

const [direction, setDirection] = useState(‘right’);

const moveSnake = () =\> {

const newSnake = [];

switch(direction) {

case ‘right’:

newSnake.push({x: snake[0].x, y: (snake[0].y + 1)%10})

}

setSnake(newSnake);

displaySnake();

}

Javascript’s initial setInterval didn’t work well with the hooks so I searched it on the internet and found a function that will call the functions at the right time.

function useInterval(callback, delay) {

const savedCallback = useRef();

// Remember the latest callback.

useEffect(() =\> {

savedCallback.current = callback;

}, [callback]);

// Set up the interval.

useEffect(() =\> {

function tick() {

savedCallback.current();

}

if (delay !== null) {

let id = setInterval(tick, delay);

return () =\> clearInterval(id);

}

}, [delay]);

}

We call moveSnake with useInterval and voila.

useInterval(moveSnake, 250);

We want to change its direction according to keypress so we add the code below.

This function changes the direction based on our key press. So we can play with our arrow keys.

Added other directions and changed 10 number with a variable. So we can change our dimensions anytime we want.

Now we are going to put food on the board.

const randomPosition = () =\> {

const position = {

x: Math.floor(Math.random()\*width),

y: Math.floor(Math.random()\*height)};

return position; }

We will use randomPosition function to initialize our food and change our food position when the snake eats food.

const [food, setFood] = useState(randomPosition);

We add this line to displaySnake

newRows[food.x][food.y]=’food’;

And this case to our return displayRows

case ‘food’:
return \<img src={Food}/\>

We want to change food position if snake eats the food.And if it doesn’t eat, we want to remove the last piece of tail.So we write:

if(snake[0].x === food.x && snake[0].y === food.y) setFood(randomPosition);
}
else {
newSnake.pop();
}

To the moveSnake function.

And we have our food.

I made the snake images opacity 0 and added a background photo.

And that’s it.

I hope that was a useful article for you. Thank you for reading.

You can fork the code from here .

Don’t forget to follow us on linkedin :)

DEV Community: Ali Gümüş Tosun

Avoiding code duplication in styled components

Making a Snake Game Using React Hooks