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
は、最近使い始めたばかりですが、簡単にコンポーネントが作れて便利です。
top
、right
、bottom
、left
で位置を指定します。
何も指定しない場合は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
の他、rem
やvw
、vh
などが使えます。
上記のコードを表示すると、後述のデモ表示のように表示されます。
ちなみに、後述のデモ表示では、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
、最高!!- 他にもいろいろ作れそう(੭ु´・ω・`)੭ु⁾⁾