m's blog

備忘録とかメモとか

React向けのフローティングボタンコンポーネントを作ってみました!

フローティングボタン用のコンポーネントを作ってみた!

フローティングボタン用のコンポーネント を作ってみたので、簡単に解説したいと思います。

タイトルは「フローティングボタン用の...」となっていますが、ボタン以外でも使えます。

一応、パッケージとして公開してみましたが、簡単なものなので、記事中のコードのコピペでいいと思います(*´▽`*;)

↓ コードはこちら

↓ パッケージはこちら

目次

コードの内容

Floatコンポーネントの内容は以下の通りです。

import styled from 'styled-components'

type Props = {
  top?: string
  right?: string
  bottom?: string
  left?: string
}

export default styled.div<Props>`
  margin: 0;
  top: ${(props) => props.top || 'auto'};
  right: ${(props) => props.right || 'auto'};
  bottom: ${(props) => props.bottom || 'auto'};
  left: ${(props) => props.left || 'auto'};
  position: fixed;
`

styled-componentsを使ってます。

styled-componentsは、最近使い始めたばかりですが、簡単にコンポーネントが作れて便利です。

toprightbottomleftで位置を指定します。

何も指定しない場合はautoが設定されます。

例えば、右下にリンクを表示させたい場合は以下のような感じで指定してください。

<Float bottom={'4vh'} right={'8vh'}>
    <a href={'#bottom-right'}>bottom-right</a>
</Float>

使用例

使用コード

以下、使用例です。

<Float top={"20px"} left={"40px"}>
    <SampleButton>top-left</SampleButton>
</Float>
<Float top={"2rem"} right={"4rem"}>
    <SampleButton>top-right</SampleButton>
</Float>
<Float bottom={"4vw"} left={"8vw"}>
    <SampleButton>bottom-left</SampleButton>
</Float>
<Float bottom={"4vh"} right={"8vh"}>
    <SampleButton>bottom-right</SampleButton>
</Float>

基本は2方向の位置を指定して使う感じです。

位置の指定には、pxの他、remvwvhなどが使えます。

上記のコードを表示すると、後述のデモ表示のように表示されます。

ちなみに、後述のデモ表示では、SampleButtonは以下のような感じのものを使用しています。

import styled from "styled-components";

export default styled.div`
  display: inline-block;
  text-decoration: none;
  background: #87befd;
  color: #fff;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  box-shadow: 0px 0px 0px 5px #87befd;
  border: dashed 1px #fff;
  transition: 0.4s;

  &:hover {
    background: #668ad8;
    box-shadow: 0px 0px 0px 5px #668ad8;
  }
`;

styled-componentsが捗りすぎる(੭ु´・ω・`)੭ु⁾⁾

デモ表示

ここまでの、コードをブラウザで表示すると以下のような感じになります。

ここでは、@mm0202/react-float パッケージを使用していますが、先ほど紹介したコードのコピペでも問題ないです。

まとめ

以上、作成したフローティングボタン用のコンポーネントについて、簡単に解説してみました。

最後に、今回の内容について、簡単にまとめてみたいと思います。

  • パッケージもありますが、コピペでいいと思います
  • styled-components、最高!!
  • 他にもいろいろ作れそう(੭ु´・ω・`)੭ु⁾⁾