React Context APIをつかってmaterial-uiをつかいやすいようにしてみた

material-uiのコンポーネントにbool値をうまく渡せるようにしたかった。
Slideにstateを渡していい感じに動きができる

create-react-appを使って環境を作る

まずはApp.jsから

src/App.js

import SimpleSlide from "./Slidecard";
import SlideContext from "./context";

import Switch from "@material-ui/core/Switch";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: false
      //handleChange: this.handleChange
    };
  }
  handleChange = () => {
    this.setState(state => ({ checked: !state.checked }));
  };

  render() {
    return (
      <SlideContext.Provider value={this.state}>
        <Switch
          checked={this.state.checked}
          onChange={this.handleChange}
          aria-label="Collapse"
        />
        <SimpleSlide />
      </SlideContext.Provider>
    );
  }
}

つぎにcontextをつくって、

src/context/index.js

import React from "react";

const SlideContext = React.createContext();
export default SlideContext;

これはmaterial-ui.comからコピペして少しリファクタリングしたやつ。
Consumerでcheckedを受けとってる。

src/Slidecard.js

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Switch from "@material-ui/core/Switch";
import Paper from "@material-ui/core/Paper";
import Slide from "@material-ui/core/Slide";
import SlideContext from "./context";

const styles = theme => ({
  root: {
    height: 180
  },
  wrapper: {
    width: 100 + theme.spacing.unit * 2
  },
  paper: {
    zIndex: 1,
    position: "relative",
    margin: theme.spacing.unit
  },
  svg: {
    width: 100,
    height: 100
  },
  polygon: {
    fill: theme.palette.common.white,
    stroke: theme.palette.divider,
    strokeWidth: 1
  }
});

class SimpleSlide extends React.Component {
  // state = {
  //   checked: false
  // };

  render() {
    const { classes } = this.props;
    // const { checked } = this.state;

    return (
      <SlideContext.Consumer>
        {({ checked }) => {
          return (
            <div className={classes.root}>
              <div className={classes.wrapper}>
                <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
                  <Paper elevation={4} className={classes.paper}>
                    <svg className={classes.svg}>
                      <polygon
                        points="0,100 50,00, 100,100"
                        className={classes.polygon}
                      />
                    </svg>
                  </Paper>
                </Slide>
              </div>
            </div>
          );
        }}
      </SlideContext.Consumer>
    );
  }
}

SimpleSlide.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SimpleSlide);

https://codesandbox.io/embed/github/takanorifukuyama/MUI-SimpleSlide-contextAPI/tree/master/
https://github.com/takanorifukuyama/MUI-SimpleSlide-contextAPI