こんにちはフロントエンドエンジニアのまさにょんです!
今回は、Material-UI の Switch コンポーネントの使い方・実装方法(SampleCode付き)について解説していきます。
目次
Material-UI の Switch コンポーネントの使い方・実装方法
MUI (Material-UI) は、React で使えるマテリアルデザインの UI コンポーネントライブラリです。
MUIのSwitch コンポーネントは、ON/OFF を切り替えるためのトグルスイッチを提供しています。
今回は、次のような基本的なSwitchコンポーネントを作成していきます。
![](https://masanyon.com/wp-content/uploads/2023/05/CheckSwitch.png)
Material-UI の Switch コンポーネントのSampleCode
MUIのSwitchコンポーネントをベースに、Propsでdefaultの真偽値を受け取るSwitchコンポーネントを作成したので、ぜひ活用してみてください。
import { Switch } from "@mui/material";
import { useState, CSSProperties, Dispatch, SetStateAction } from "react";
/** Propsの型定義 */
interface PropsType {
default: boolean;
style?: CSSProperties;
setter: Dispatch<SetStateAction<boolean>>;
disabled: boolean;
}
/** Switchコンポーネント: Propsで、defaultの真偽値や Setterを受け取る */
const CheckSwitch = (props: PropsType) => {
const [checked, setChecked] = useState<boolean>(props.default);
const onSwitch = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked);
props.setter(event.target.checked);
};
return (
<div
style={{
textAlign: "center",
}}
>
<div style={props.style ? props.style : undefined}>
<Switch
checked={checked}
onChange={(e) => onSwitch(e)}
name="testSwitch"
disabled={props.disabled}
/>
</div>
</div>
);
};
export default CheckSwitch;
Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!
React関連の書籍
プログラミング学習・エンジニア転職関連の情報
自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)
![](https://www15.a8.net/0.gif?a8mat=3NNG1X+D8W8C2+3GWO+6O1Z5)
『GEEK JOBキャンプ』スピード転職コース(無料)
![](https://www13.a8.net/0.gif?a8mat=3NNG1X+DAOJ5E+40C4+5ZMCH)
【IT道場】入校時0円! 就職目的プログラミングスクール
![](https://www14.a8.net/0.gif?a8mat=3NNG1X+DML78Y+53W0+609HT)
エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】
![](https://www14.a8.net/0.gif?a8mat=3NNGTV+ACPDGY+4VYG+60H7L)
『techgym』 (Python特化・無料)
![](https://www14.a8.net/0.gif?a8mat=3NNG1X+C2MGDU+4PGA+BY641)