Reactでブロック崩しのボールみたいなのを作る（デザイン応用例付き）

はじめに

こんにちは！UI/UX大好きそるとです！

Webページを華やかにしたかったので思いつきで作ってみました。
※ブロック崩しを作るわけではないです。

実際に下記で紹介するコンポーネントを使用して作成したWebサイトを最後に載せておりますのでお楽しみに。

実装

ブロック崩しのボール的なコンポーネント

画面の横幅・縦幅いっぱいに暴れ回るボールを作成したかったのでこちらを参考に画面の横幅・縦幅を取得するカスタムフック(useWindowDimensions)を使用しております。

表示位置・動き出す方向は固定になっておりますが、引数で指定した位置・方向に動き出すことができればもっと暴れ回らせますね！

Ball.js

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

function Ball() {

    // 画面の縦幅・横幅取得するカスタムフック
    const { width, height } = useWindowDimensions();

    // 横位置
    const [x, setX] = useState(10);

    // 縦位置
    const [y, setY] = useState(10);

    // 横移動フラグ（true:右に移動、false:左に移動）
    const [moveXflag, setmoveXflag] = useState(true);

    // 縦移動フラグ（true:下に移動、false:上に移動）
    const [moveYflag, setmoveYflag] = useState(false);

    // サイズ
    const ballSize = 10;

    useEffect(() => {

        // 端に行ったら方向を逆にする
        if (y == 0) {
            setmoveYflag(true);
        }
        if (x == width - ballSize) {
            setmoveXflag(false);
        }
        if (y == height - ballSize) {
            setmoveYflag(false);
        }
        if (x == 0) {
            setmoveXflag(true);
        }

        // 移動速度
        const timeout = setTimeout(() => 
            {
                if (moveXflag) {
                    setX(x + 1);
                } else {
                    setX(x - 1);
                }
                if (moveYflag) {
                    setY(y + 1);
                } else {
                    setY(y - 1);
                }
            }
        , 10);

        return () => clearTimeout(timeout);

    }, [x, y])

    return (
        <div style={{
            position: "absolute",
            top: y,
            left: x,
            width: ballSize + "px",
            height: ballSize + "px",
            boxShadow: "0 5px 10px 0 rgba(0, 0, 0, .3)",
            borderRadius: "50px",
            background: "red"
            }}>
        </div>
    );
}

export default Ball;

使い方

App.js

import Ball from './Ball';

function App() {
  return (
    <div>
      <Ball/>
    </div>
  );
}

export default App;

デザインに落とし込んだ実例

ファッション系のなんちゃってECサイトを作りましたが、ホーム画面が寂しくなりそうだったので画面にいくつかのボール（ランダムで商品を表示）を配置してそのボールから商品詳細に遷移できるようにしました。