Creating Instagram Follow Card with Material-UI
The course is available at http://bit.ly/2SZDYyw
In this hands-on video, I will demonstrate how you can create an Instagram Follow Card with Material-UI and React.
You will see the use of Components from Material-UI being used such as Typography
, Grid
, makeStyles
, Button
, and Avatar
.
The codebase is available at https://github.com/bonsaiilabs/instagram-follow-card
Full Transcript
Hello there, it’s Harit from bonsaiilabs. In today’s video I will show you how to create an instagram follow button using Material-UI, so let’s get started
If you have an instagram account, you may have seen these cards to follow users on Instagram. How about we create a this card today using ReactJS and Material-UI. In order to make the code manageable,
I have divided it into smaller components. The first one will be called Header
which will contain the cross icon. The second one will be called ChannelPhoto
that will contain the photo of the user.
The third one will be called ChannelUserName
. This will contain 2 items, the username and the verified icon. Next up, I will create ChannelName
component which will contain the name of the channel.
And finally, we will have FollowButton
Component which users click to follow a certain user on instagram. Let’s go ahead and create this card.
I will open up the code sandbox to create this card. We will use the official React template which created by the CodeSandbox team. Once the app is ready, I will first increase the font size so that it is
easier for you and me to follow the code as I write it. Next, in App.js
we can see the boilerplate code which is what is displayed on the right-hand side browser as the output. I will first create a new JSX
file
called InstaFollow.jsx
. This is where I will write the complete code for the Instagram Follow Card. For now, I will import the React dependency and create a component that will return Coming Soon
in the H1
heading.
Next, I will go to App.js
, remove the boilerplate code and add InstaFollow
component so that it is called now. Once I do that, we can see the Coming Soon
output in the browser. Great!
I will now add the dependency for @material-ui/core
and @material-ui/icons
which will be used in the creation of the card. Now, I will go to the InstaFollow.jsx
file where we will write most of the code. I will first
replace this code with the Grid
container and add the import from material-ui/core
. This is because the card has items which needs be contained in a box, and I will leverage Material-UI Grid system for that.
Next up, I will place 5 components inside the grid, one for each sub component that we saw previously. These components do not exists and we will write them in just a few moments. For now, I will comment out all others
except Header
. I will create a component called Header
which returns a H6
Typography
component and the text is Header
. I will also add the missing import. With that, we can see that errors are gone and we can see
Header text in the browser. We will do the same thing for all other components for now, just so that we can call them and remove the commented out code. This will help us replace the implementation, one component at a time.
However, as we see, all these components are placed next to each other which is not what we want. We want them to be aligned vertically with one component per row. For that, we will set the direction
property of Grid to be
column
. By default, the value is row
, which is why the elements were aligned one after the another in the row. After the change, we can see all elements are coming one after the another vertically aligned. But this looks no
way closer to our Instagram card component. There are no borders, so we don’t even know how wide is the component? The time has come when we need to add some styles.
I will first import the makeStyles
from material-ui/core
. Next, I will create a useStyles
const
that will call the makeStyles()
function, passing a higher-order function. The higher-order function takes the styles
object and
returns an object. This is where we will add our styles for the card. I will first add styles for root
. I will apply the root style to our grid container in just a moment. I have added 4 properties here - the gray border
,
padding
around the content, a border-radius
to give a curve to the border and a maxWidth
to fit the content inside the container. Now, I will create a classes
variable and call useStyles()
method. Then, I will use the className
property on grid container and assign classes.root
to it. And bam! Here you see the output as a card with 5 rows inside it. Now, that we have the structure of our instagram follow card, let’s work on the Header
component. I
will make the Header
a Grid container
and 1 grid item
. I put a grid breakpoint of xs
with a value of 1
out of the 12-point grid system. Then, I will import the Clear
icon from material-ui icon and call it ClearIcon
. Then, I
will use this ClearIcon
inside the Grid item and as we can confirm, it appears on the output now. But, it should be on the right side instead of left. Let’s change the container settings using justify
property with the value
of flex-end
. With this we can see that ClearIcon
now shift to right, the way we wanted. But it looks bigger and is not gray in color, so let’s add few styles. Back in our makeStyles
method, I will add a new property called
header
. I will apply 2 styles here. First, I will add a color
property, and assign a gray color from our theme with a 40
variant. Next, I will set the height to be 15
pixels to make it smaller. Great! Let’s assign this style
next. Back in our component, I will add a classes
prop to Header
and pass the classes to it. Then, in our Header
component I will accept classes
prop. I will use className
property on ClearIcon
and assign value of classes.header
to it. And we can see the clear icon with the gray color and smaller in size just how it looks in instagram follow card.
Moving on, let’s implement ChannelPhoto
component. Here, I will return the Avatar
component provided by Material-UI. I am using alt
property and the src
refers to the image of National Geographic. I will add the import for
Avatar
from Material-UI here. And we can see that the avatar image popped up in our grid container. Cool!. It looks smaller than what we need however, so let’s add some styles to it. I will first add a way in the component
to receive the classes
prop. Then, I will use the use classes.avatar
property assign styles to out component. I will also pass the classes
prop to ChannelPhoto
from our top level grid container. And then,
we will add a new property called avatar
in our makeStyles
method. I will add width
and height
property and assign the spacing
value using theme.spacing
method provided by Material-UI with value of 7
.
But wait, our photo still looks the same. Oh, its because in Avatar
component I used classes
instead of className
property. Once I change that, we can see that our photo is larger than before.
But, somehow it does not align in the center of the grid container. For that, I will add alignItems
property on top-level grid with the value of center
, and this will bring all the items in the center of the grid container.
Cool! So, we have Header
and ChannelPhoto
ready. Let’s work on ChannelUserName
next!
Now, this component contains 2 things - a text value and an image with arrow sign. So, I will first add an icon to src
folder called verified.png
. Then, I will import this image and call it verified
. Now, we are ready to
work on ChannelUserName
component. I will replace its existing implementation with another Grid container. Let’s review what’s going on! The top level grid container contains 2 grid items. The first Grid items contains a xs
breakpoint with value of 3
. It contains a Typography
component with body2
variant and prints the value of NatGeo
. The next Grid item contains a xs
breakpoint with value of 1
and contains an image tag with the
value of verified
image. Overall in this container, we keep thing aligned in center using justify
and alignItems
property of container to be center
. To keep enough space between the two grid items, I have used
spacing
property on container with the value of 5
. But hang on! This breaks our entire component with this large verified image. It’s time to add some styles to ChannelUserName
component. I will first add classes
props on the component and add className
property to image with the value of classes.verified
. Next, I will pass on the classes
props to ChannelUserName
from our top level component. And finally in our makeStyles
method, we will add a new property called verified
.
I will add height
property with the value of 20
. With that, we can see that the verified icon looks smaller and the way we want it. I will also add a new property called channelUserName
to make the font-weight: bold
using the
theme.typography.fontWeightBold
property. Now, let’s put this to use. Back in our ChannelUserName
component, I will add className
property to Typography
component with the value of classes.channelUserName
. And with that,
we can see that username is now bold. But there is very less space between the image above and the username, so let’s add some space between them. I will wrap our Avatar
in a div
and add className
property with the value of
classes.photoContainer
. Then in the makeStyles
, I will add a new property called photoContainer
. I will add marginBottom
property with theme.spacing
of 1
. And with that, we can see the space added between the 2 components.
Probably added a space value of 2
gives much better view than spacing of 1
.
Now let’s work on ChannelName
property. It returns a Typography
component with a textSecondary
color, making it grey and also variant of caption
which makes the text small as we can confirm here. And Finally, lets create
the FollowButton
component. I replace it’s implementation to return a Button
component. I use disableElevation
property to hide any shadows beneath the button. I use the primary
color for the button and contained
variant,
which fills the primary color in the button. I also make the button small
considering the follow card is not big in general. Now, I will add the import of Button
component from @material-ui/core
and as we can confirm that a
button shows up. The button and the channel name have less space in between them so let’s fix that. I will wrap channelName
in a div
and assign its property className
the value of classes.channelNameContainer
. I will also
add classes
prop to the component. Then in the top level grid component, I will pass the classes
prop to ChannelName
component. Then in the makeStyles
, I will add a new property called channelNameContainer
. I will add a
marginBottom property with the theme.spacing(1). I will also stretch our follow button. For that, I will add a new property called followButton. In this, first I will set the text transform property to none, because I the
text label Follow
exactly same as the instagram component, not all caps. Then, I will add paddingRight
and left with theme.spacing
of 6
. I will also change the fontWeight
to be medium
using theme.typography.fontWeightMedium
.
Next we will use this property. First we will pass classes
prop to FollowButton
. Then, in our FollowButton
component, I will first accept the classes
prop. Then, I will add className
property to Button
and add value of
classes.followButton
and here you go! We have completed creating out Instagram follow card using React and Material-UI. We can go to the full browser window and compare our implementation with our desired version. Not bad right?
Now, you may see that button colours are different and font family looks a different too, right? Yes, and that’s where we can work to customize our theme to match with with exactly is needed. If you are a developer and interested in learning this cool stuff, look no other place than our Material-UI with React course at bonsaiilabs. You can find the link in the description below. You can watch out the trailer to find what’s covered. It’s got the review from library author himself. At this page, you can find the detailed description of the course, the complete syllabus and reviews from other learners who have taken this course. Best of all? You can watch out the FREE videos of the course on the website itself, so make sure to click on the link in the description below and checkout yourself. Thank you again and I will see you again in the future with a new hands-on demo!