3

ReactJS MDBootstrap Switch Component

 1 month ago
source link: https://www.geeksforgeeks.org/reactjs-mdbootstrap-switch-component/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

ReactJS MDBootstrap Switch Component

Last Updated : 07 Jan, 2022

MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Switch Component in ReactJS MDBootstrap.
The switch component is used to indicate the on/off state of the component.

Properties: 

  • className: It is used to add a custom class to the component.
  • disabled: It is used to make the component disabled.
  • name: It is used to specify the name for the component.
  • id: It is used to define an id for the component.
  • label: It is used to define a label text for the component.
  • labeled: It is used to define an id for the label.
  • labelClass: It is used to add custom classes to the label.

Syntax:

<MDBSwitch />

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: Install ReactJS MDBootstrap in your given directory.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Step 4: Import the element to be used in the project.

import { MDBSwitch } from 'mdb-react-ui-kit'

Project Structure: It will look like the following.

Project Structure

Step to Run Application: Run the application from the root directory of the project, using the following command.

npm start

Example 1: this is the basic example that shows how to use Switch Component.

  • App.js
import React from "react";
import { MDBSwitch } from 'mdb-react-ui-kit';
export default function App() {
return (
<div id="gfg">
<h2>GeeksforGeeks</h2>
<h4>ReactJS MDBootstrap Switch component</h4>
<MDBSwitch label='Switch 1' />
<br />
<MDBSwitch defaultChecked label='Switch 2' />
<br />
</div>
);
}

Output:

ReactJS MDBootstrap Switch Component

Example 2: In this example, we will know how to use disabled property in a Switch component.

  • App.js
import React from "react";
import { MDBSwitch } from 'mdb-react-ui-kit';
export default function App() {
return (
<div id="gfg">
<h2>GeeksforGeeks</h2>
<h4>ReactJS MDBootstrap Switch component</h4>
<MDBSwitch disabled label='Switch 1' />
<br />
<MDBSwitch disabled defaultChecked 
label='Switch 2' />
<br />
</div>
);
}

Output:

ReactJS MDBootstrap Switch Component

Reference: https://mdbootstrap.com/docs/b5/react/forms/switch/

“This course was packed with amazing and well-organized content! The project-based approach of this course made it even better to understand concepts faster. Also the instructor in the live classes is really good and knowledgeable.”- Tejas | Deutsche Bank

With our revamped Full Stack Development Program: master Node.js and React that enables you to create dynamic web applications.

So get ready for salary hike only with our Full Stack Development Course.

Like Article
Suggest improvement
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK