ReactJS Reactstrap Media Component

28 Jul, 2021
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 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.
App.js
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="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210728124621/geekslogo.png"                        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=            'https://www.geeksforgeeks.org/'>                <Media body>                    <Media heading>                        GeeksforGeeks                    </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
Reactstrap
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.