ReactJS Reactstrap Media Component

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=
"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: