Render Media List Component With Reactstrap

#react #javascript

Reactstrap

Reactstrap makes it easy to use Bootstrap 4 components in a react application. Media is one of the components, and we'll use it to display a list of items in a simple react application. The list items will consist of an image, heading, & a paragraph.

Installation

To configure our project to use reactstrap, type the following at the terminal to install reactstrap, and Bootstrap 4 via either NPM or Yarn.

npm install --save bootstrap react-popper reactstrap

yarn add bootstrap react-popper reactstrap

Adding a Menu Component

Now inside our App.js let's import the menu component with the following code

import { Media } from "reactstrap";

The Media has properties including list, tag, object, heading, & body. List encloses all the list items, tag encloses each list item, object encloses the image while the heading & body encloses the list heading and body respectively. With that explanation out the way lol 😉, let's add the code snippet below in the App.js to see this in action.



export default function App() {
const Example = () => {
return (
<div>
   <Media list>
      <Media tag="li">
         <Media left top href="#">
            <Media
               object
               src="http://place-puppy.com/100x200"
               alt="place-puppy image"
               />
         </Media>
         <Media body>
            <Media heading>Top aligned media</Media>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
            nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
         </Media>
      </Media>
      <Media tag="li">
         <Media left middle href="#">
            <Media
               object
               src="http://place-puppy.com/200x200"
               alt="place-puppy image"
               />
         </Media>
         <Media body>
            <Media heading>Middle aligned media</Media>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
            nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
         </Media>
      </Media>
      <Media tag="li">
         <Media left bottom href="#">
            <Media
               object
               src="http://place-puppy.com/300x200"
               alt="place-puppy image"
               />
         </Media>
         <Media body>
            <Media heading>Bottom aligned media</Media>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
            nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
         </Media>
      </Media>
   </Media>
</div>
);
};
return (
<div className="App">
   <Example />
</div>
);
}

In essence we're declaring a function component called Example which returns three list items, each item has an image with a heading and body text.
Please checkout reacstrap documentation below for more examples on how to implement the Media component in a react application.

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