【React】snackbarsを親コンポーネントから子コンポーネントにメッセージを渡せるようにカスタマイズした例【Material-UI】

カスタマイズした箇所について

MaterialUIのsnackbarsを親コンポーネントから渡されたメッセージを子コンポーネントのsnackbarsに渡して、そのメッセージを表示するような簡単なカスタマイズをしました。

なお、今回はスタンダードなCustomized snackbarsを使用しました。

実装

まず親コンポーネントの実装例です。 簡単に呼び出す箇所のみを抜き出して記載します。 buttonを押下すると、メッセージが更新されるようになっています。

Hoge.jsx

import React, {Fragment,useState} from "react";
import {CustomizedSnackbars} from "../component/MaterialUISnackber";

export const Hoge= () => {
  const [messageState,setMessage] = useState("");
  const [count,setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    if(messageState === ""){
      setMessage("SNACKMESSAGE");
    }else{
      setMessage(count + "回目");
    }
  }

  return (
  <Fragment>
    <Button variant="outlined" onClick={handleClick}>
        ADDMESSAGE
     </Button>
    {
    state.message !== ""?
      <MessageWrapper>
        <CustomizedSnackbars message={state.message}/>
      </MessageWrapper>
    :
      null
    }
  </Fragment>
  )
}

こちらが肝心の子コンポーネントのsnackbarになります。
デフォルトからの主な変更点としては、
・useEffectでopenとcloseをmessageが変更された時に動作するようにしました
・messageがない時や想定していない値(undefined)が入った時に表示しないようにしました(念のため)

CustomizedSnackbars

import React, {Fragment, useEffect,useState } from 'react';
import Button from '@material-ui/core/Button';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import { makeStyles } from '@material-ui/core/styles';

function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    '& > * + *': {
      marginTop: theme.spacing(2),
    },
  },
}));

export function CustomizedSnackbars({message}) {
  const classes = useStyles();
  const [open, setOpen] = useState(false);
  
  useEffect(() => {
    if(message === ""){
      setOpen(false);
    } else {
      setOpen(true);
      console.log(message)
    }
  },[message])

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }

    setOpen(false);
  };

  return (
    <Fragment>
      {
      message === undefined || message === null || message === ""?
        null
      :
      <div className={classes.root}>
        <Snackbar open={open} autoHideDuration={5000} onClose={handleClose}>
          <Alert onClose={handleClose} severity={"success"}>
            {message}
          </Alert>
        </Snackbar>
        </div>
      }

    </Fragment>
  );
}

参考

https://material-ui.com/components/snackbars/#customized-snackbars