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.

Also Read : Computer Vision in 2024 : All The Things You Need To Know

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:

Also Read : What is Difference Between AI, Generative AI, and Vision AI: Choosing the Right Tool

Conclusion:

So, in this article, we have been through what the Media component in ReactJS is. Also, feel free to comment on the post with your suggestions and feedback. 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. Discover how the Media component in ReactJS enhances media handling. Explore insights with our generative AI development company.