What is the Media component in ReactJS?

The media component is used to add some media to our project. So, in this article, we will see what is the Media component in ReactJS.

What is the Media component in ReactJS?

Reactstrap is a version of Bootstrap made for React. So, media is a container that can hold images and text. Below are the properties of the Reactstrap media component:

Properties:

• Tag: In ReactStrap Media Component, you can use the Tag property to set the tag in the component. Also, It takes string and function values.
• className: In ReactStrap Media Component className define the class name of the component. So, with the help of className, you can add the styling using CSS.
• heading: In ReactStrap Media Component, you can use the heading property to set the heading in the text. Moreover, it takes a boolean value as the default argument.
• middle: In the reactStrap, you can use the middle property to set the middle alignment between the two objects. It takes a boolean value.
• fluid: In ReactStrap Media Component fluid applies .container-fluid class and if string then it applies .container-{breakpoint} class.
• block: In ReactStrap Media Component, you can use block props to indicate whether the block should have a block style or not.
• color: You can use the color props in the reactStrap to set the color of the element in the component.
• body: Use the body properties in the media component 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 are 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.

Creating React Application:

1) Create a React application using the following command.

npx create-react-app foldername

2) After creating your project folder i.e. folder name, move to it using the following command.

cd foldername

3) Install Reactstrap in your given directory.

 npm install --save reactstrap react react-dom

4) Import the element you want to use in the project.

import {Media} from 'reactstrap'

Example:

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="Your image URL"
                        alt="Default Image"
                    />
                </Media>
                <Media body>
                    <br></br>
                    <Media heading>BOSC Tech Labs PVT. LTD.</Media>
                    <br></br>
                    Welcome to BOSC Tech Labs PVT. LTD. Your no 1 solution for Website and mobile application development. We will provide top services in app development. 
                </Media>
            </Media>
        </div>
    );
}

npm start

OUTPUT:

Conclusion:

So, in this article, we have been through what is the Media component in ReactJS. Also, feel free to comment with your suggestions and feedback on the post. Moreover, at BOSC Tech Labs, we have a team of highly experienced React JS developers. They can assist you in developing your customized web app. So contact us to hire experienced  ReactJS developers.