ふかしぎのReactさんぷるず

Growの解説 Componet API - MUI v5 API - Reactさんぷるず

最終更新 2022/02/21
MUI v5の各機能の説明です。
対象のMUIのバージョンは v5.4.1 です。
ここでは初心者向けの基本的な説明をしています。

使用するための下準備

お約束です。取り込まないと使えません。
インポートならば
import { Grow } from '@mui/material';
CDNで使いたいのなら<script>でMUIを読み込んだ後に
const Grow  = MaterialUI.Grow;
で使用できるようになります。
CDNでの詳しいやり方はこちらに移動してください。

Growの各プロパティの解説

MUIでのGrowの扱い方の説明です。
グローは要素の中心から透明化・不透明化しつつ拡大・縮小するアニメーションの機能です。
要素の中心から拡大・縮小するZoomコンポーネントと、透明化・不透明化するFadeコンポーネントを組み合わせた動きになります。
グローはrefを設定しないとエラーになる場合があります。
このサンプルの「onf/off」を押してください。十字が透明化・不透明化しつつ中心から拡大・縮小します。
const Grow = MaterialUI.Grow;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div>
      <Grow in={onOff}>
        <TukuttaIcon />
      </Grow>
      <button onClick={()=>setonOff(!onOff)}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

refの設定

SVGではrefを明示的に設定する必要が無かったですが、ものによってはrefの設定が必要になります。
例えばButtonコンポーネントやDIV要素などです。
下のサンプルはrefを設定しています。
const Grow = MaterialUI.Grow;
const Button = MaterialUI.Button;
const TukuttaDiv = React.forwardRef((props, ref) => <div {...props} ref={ref}>作ったDIV(ref)</div>);
const TukuttaButton = React.forwardRef((props, ref) => <Button variant="contained" {...props} ref={ref}>ボタン(ref)</Button>);
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div style={{"display":"flex"}}>
      <Grow in={onOff}>
        <TukuttaButton />
      </Grow>
      <Grow in={onOff}>
        <TukuttaDiv />
      </Grow>
      <button onClick={()=>setonOff(!onOff)}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);
ボタンのrefを設定しない場合はこのようになります。
const TukuttaButton = () => <Button variant="contained">ボタン</Button>;
ですがこれをGrowの子要素に設定するとrefが取得できずにエラーになります。
Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Grow)`. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://mui.com/r/caveat-with-refs-guide
    at Grow (https://unpkg.com/@mui/material@5.4.1/umd/material-ui.development.js:30269:7)
    at Main (<anonymous>:99:99)
ref付きでつくりましょう。
const TukuttaButton = React.forwardRef((props, ref) => <Button variant="contained" {...props} ref={ref}>ボタン(ref)</Button>);

children

Growのchildrenの使い方の説明です。
childrenに表示するノードを設定できます。
const Grow = MaterialUI.Grow;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div>
      <Grow in={onOff} children={<TukuttaIcon />}></Grow>
      <button onClick={()=>setonOff(!onOff)}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

addEndListener

GrowのaddEndListenerの使い方の説明です。
コラプスの終了後に付け加える関数を設定できます。
のはずですが実際にはコラプスのアニメーションが始まる前に実行されます。
このサンプルはaddEndListenerで「addEndListener実行」というウインドウを出します。
const Grow = MaterialUI.Grow;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(false);
  return (
    <div>
      <Grow in={onOff} addEndListener={()=>{alert('addEndListener実行');}}>
        <TukuttaIcon />
      </Grow>
      <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

appear

Growのappearの使い方の説明です。
inがtrueの時、つまり最初から表示している際にアニメーションをしてから表示するかの設定です。
inがtrueでappearもtrueだと最初にアニメーションをしてから表示します。
inがtrueでappearがfalseだとアニメーションなしでいきなり表示します。
デフォルトはtrueです。
サンプルの1つ目はtrueなのでこのページを開いた際にアニメーションで表示されます。
2つ目はfalseなのでいきなり表示されます。
この位置でCtrlキー+Rキーや、F5キーなどでブラウザーをリロードすると違いがわかります。
const Grow = MaterialUI.Grow;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  return (
    <div>
      <Grow in={true} appear={true}>
        <TukuttaIcon />
      </Grow>
      <Grow in={true} appear={false}>
        <TukuttaIcon />
      </Grow>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

easing

Growのeasingの使い方の説明です。
enterで表示する際の設定、exitで消える際の設定ができます。
未設定のデフォルトはcubic-bezier(0.4, 0, 0.2, 1)です。
この値はテーマから取得しています。theme.transitions.easing.easeInOutです。
サンプルの1つ目は未設定のデフォルト
サンプルの2つ目は未設定のデフォルトと同じ意味になります。
3つ目は表示する際に最初は遅く、そして最後の方は速くなります。消える際のexitは設定していないので1つ目の標準と同じタイミングで消えます。
4つ目は表示と非表示で最初は速く、そして最後の方で遅くなります。
違いを分かりやすくするためにtimeoutで長めの時間でアニメーションさせています。
const Grow = MaterialUI.Grow;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(false);
  return (
    <div style={{"display":"flex"}}>
      <Grow in={onOff} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Grow>
      <Grow in={onOff} easing={{"enter":"cubic-bezier(0.4, 0, 0.2, 1)","exit":"cubic-bezier(0.4, 0, 0.2, 1)"}} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Grow>
      <Grow in={onOff} easing={{"enter":"cubic-bezier(1, 0, 1, 1)"}} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Grow>
      <Grow in={onOff} easing={{"enter":"cubic-bezier(0, 1, 1, 1)","exit":"cubic-bezier(0, 1, 1, 1)"}} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Grow>
      <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

in

Growのinの使い方の説明です。
表示するかしないかをブール値で設定します。
trueの場合は表示し、falseの場合は非表示です。
未設定のデフォルトはfalseです。
サンプルではGrowを3つ定義していますが、2つ目がfalse、3つ目は未設定なので結果として1つ目の1個しか表示されていません。
const Grow = MaterialUI.Grow;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  return (
    <div>
      <Grow in={true}>
        <TukuttaIcon/>
      </Grow>
      <Grow in={false}>
        <TukuttaIcon/>
      </Grow>
      <Grow>
        <TukuttaIcon/>
      </Grow>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

timeout

Growのtimeoutの使い方の説明です。
数値を設定するとその時間をかけて表示・非表示をします。数値はms(ミリ秒)です。1000ms=1秒です。
文字列でautoと設定すると内部で自動的に設定されます。
さらに細かく時間指定できます。
appearは画面で初めて表示する際の時間です。
enterは非表示から表示へ切り替える時間
exitは表示から非表示へ切り替える時間
数字だけの場合はappear、enter、exitを同じ数字にした設定になります。
未設定のデフォルトはテーマの値が設定されます。
enterはtheme.transitions.duration.enteringScreen(=225)
exitはtheme.transitions.duration.leavingScreen (=195)
サンプルの1つ目は1秒(1000ms)かけて表示・非表示します。
2つ目は1つ目と同じ意味になります。
3つ目は画面を初めて表示した際は1秒、表示する際には2秒、消える際には3秒かけてアニメーションします。
4つ目は画面を初めて表示した際は4秒、表示する際には5秒、消える際には6秒かけてアニメーションします。
5つ目は未設定のautoです。
const Grow = MaterialUI.Grow;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div style={{"display":"flex"}}>
      <Grow in={onOff} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Grow>
      <Grow in={onOff} timeout={{"appear":1000,"enter":1000,"exit":1000}}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Grow>
      <Grow in={onOff} timeout={{"appear":1000,"enter":2000,"exit":3000}}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Grow>
      <Grow in={onOff} timeout={{"appear":4000,"enter":5000,"exit":6000}}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Grow>
      <Grow in={onOff} timeout="auto">
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Grow>
      <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

その他のアニメーション(Transitions)

コラプス(Collapse)、フェード(Fade)、ズーム(Zoom)、グロー(Grow)、スライド(Slide)の5つがあります。
コラプス(Collapse)は、その場で縦方向・横方向から現れます。
フェード(Fade)は、じょじょに透明度を変化しながら現れます。
ズーム(Slide)は、中心からサイズを変えながらじょじょに現れます。
グロー(Zoom)は、中心からサイズと透明度を変えながら現れる。(フェードとズームの組み合わせ)
スライド(Grow)は上・下・左・右から移動しながら現れます。
const Collapse = MaterialUI.Collapse;
const Fade = MaterialUI.Fade;
const Zoom = MaterialUI.Zoom;
const Grow = MaterialUI.Grow;
const Slide = MaterialUI.Slide;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
<div>
<div style={{"display":"grid","gridTemplateColumns":"repeat(5, 1fr)"}}>
      <Collapse in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Fade in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Fade>
      <Zoom in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Zoom>
      <Grow in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Grow>
      <Slide in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Slide>
      <div>コラプス(<a href="/react/mui/apiCollapse.php">Collapse</a>)</div>
      <div>フェード(<a href="/react/mui/apiFade.php">Fade</a>)</div>
      <div>ズーム(<a href="/react/mui/apiSlide.php">Slide</a>)</div>
      <div>グロー(<a href="/react/mui/apiZoom.php">Zoom</a>)</div>
      <div>スライド(<a href="/react/mui/apiGrow.php">Grow</a>)</div>
    </div>
    <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
</div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);
menu

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次