Reactstrap
Reactstrap makes it easy to useBootstrap 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 animage, 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 ourApp.js let's import the menu component with the following code
import { Media } from "reactstrap";
The Media has properties includinglist, 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 calledExample 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/]
Top comments(2)
- LocationNYC - the Big 🍎
- EducationSUNY Stony Brook
- Joined
Hi Collins.
Can I request to format the code snippets?
You could refer to theEditor Guide :)
- LocationNairobi, Kenya
- WorkWeb Developer
- Joined
Yes thank you.
For further actions, you may consider blocking this person and/orreporting abuse
