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

Output: 

Example 2: In this example, we will see how to use tag property in media.

• App.js

Output: 

Reference: https://reactstrap.github.io/components/media