ツクログ

tsukulognet

tsukulognet

道産子。Reactでなまら面白いものを作りたい。

【React】marginをコンポーネントにする

eye catch

コンポーネントがmarginを持つべきではないと考え、このような考えに至りました。

開発環境の構築

今回はCreate React Appで開発します。Create React AppによるReactの開発環境構築についてはReactの開発環境を構築するをご覧ください。

コンポーネントを作る

styled-componentsのインストールがまだであれば、ターミナルで以下のコマンドを実行してstyled-componentsをインストールします。

yarn add styled-components

それではMarginコンポーネントを作成します。src配下にcomponentsディレクトリを作成し、そこにMargin.jsを作成後、内容を以下のようにします。

components/Margin.js

import React from 'react'
import styled from 'styled-components'

const Margin = styled.span`
    display: inline-block;
    margin-top: ${({ top }) => (top ? top : `0`)};
    margin-right: ${({ right }) => (right ? right : `0`)};
    margin-bottom: ${({ bottom }) => (bottom ? bottom : `0`)};
    margin-left: ${({ left }) => (left ? left : `0`)};
`;

export default Margin

コンポーネントを使ってみる

作成したMarginコンポーネントを使ってみます。App.jsを以下のように書き換えます。

App.js

import React from 'react'
import styled from 'styled-components'
import Margin from './components/Margin';

const Box = styled.div`
  background-color: red;
  height: 50vmin;
  max-height: 200px;
  max-width: 200px;
  width: 50vmin;
`

const App = () => {
    return (
        <div>
      <Margin bottom="2vmin">
            <Box />
      </Margin>
            <Box />
        </div>
    );
};

export default App

App.jsを上書き保存すると、ページ上に表示された2つの四角い要素間にマージンが加わっています。

Demo