Reactstrap is a 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 see how to use the Media Component in Reactstrap. The media component is used to add some media to our project.
Properties:
- Tag: In ReactStrap Media Component, Tag is a property that is used to set the tag in the component. It takes string and function values.
- className: In ReactStrap Media Component className define the class name of the component. With the help of className, you can add the styling using CSS.
- heading: In ReactStrap Media Component heading is the property in reactStrap is used to set the heading in the text. It takes a boolean value as the default argument.
- middle: In the reactStrap, the middle property is used to set the middle alignment between the two objects. It takes a boolean value.
- fluid: In ReactStrap Media Component fluid is applies .container-fluid class and if string then it applies .container-{breakpoint} class.
- block: In ReactStrap Media Component block props are used to indicate whether the block should have a block style or not.
- color: The color props in the reactStrap are used to set the color of the element in the component.
- body: The body properties in the media component are used to set the body of the element. By default, it takes a boolean value.
- bottom: The bottom properties are used to fix the position in the bottom of the components. It should be true or false, it takes a boolean value.
- children: children properties are used to set the children of the element in components. It takes a node value.
- heading: heading properties is used to set the heading of the element, by default it takes a boolean value.
- left: left properties are used to set the alignment of the element on the left side of the component, it takes a boolean value .
<Media> Content </media>
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. folder name, move to it using the following command.
cd foldername
- Step 3: Install Reactstrap in your given directory.
npm install --save reactstrap react react-dom
- Step 4: Import the element to be used in the project.
import {Media} from 'reactstrap'
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 the media component.
Filename: App.js
javascript
import React from "react"; import { Media } from "reactstrap"; import "bootstrap/dist/css/bootstrap.min.css"; export default function App() { return ( <div className="App"> <Media> <Media left href="#"> <Media object src= alt="cat" /> </Media> <Media body> <br></br> <Media heading>GFG DSA Course</Media> <br></br> I Want to learn DSA but don't know where to start? Don't worry, this course is a complete package for you to learn all the concepts at your own pace. It's perfect for students and working professionals who know at least anyone coding language. </Media> </Media> </div> ); } |
Output:
Example 2: In this example, we will see how to use tag property in media.
- App.js
Javascript
import React from 'react'; import { Media } from 'reactstrap'; const gfg = (props) => { return ( <div id='gfg'> <br /> <Media tag='a' href= <Media body> <Media heading> neveropen </Media> Reactstrap is a bootstrap based react UI library that is used to make good looking webpages with its seamless and easy to use component. </Media> </Media> </div> ); } export default gfg; |
Output:
Reference: https://reactstrap.github.io/components/media
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
