Welcome folks today in this blog post we will be building instagram ui
clone in browser using the react-instagram-ui-kit
library in javascript. All the full source code
of the application is shown below.
Get Started
In order to get started you need to make a new react.js
app using the below command as shown below
npx create-react-app sampleapp
cd sampleapp
And after that you need to install the below library
using the below command as shown below
npm i react-instagram-ui-kit
And after that you will see the below directory
structure of the react.js app as shown below
Building Instagram UI Clone Using Components
Now we can modify the App.js
file and copy paste the following code
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import { Grid, Profile, Photo, GridControlBar, GridControlBarItem, } from "react-instagram-ui-kit"; const examplePhotos = [ "https://picsum.photos/800/720", "https://picsum.photos/900/720", "https://picsum.photos/1000/720", "https://picsum.photos/500/720", "https://picsum.photos/600/720" ] export default function Index() { return ( <div> <Profile bio={` Lead guitarist of AC⚡DC `} pictureSrc="https://picsum.photos/200/300" username="angusyoung" followersData={[31, 3000000, 55]} fullname="Angus Young" /> <Grid> <GridControlBar> <GridControlBarItem isActive>𐄹 Posts</GridControlBarItem> <GridControlBarItem>웃 Tagged</GridControlBarItem> </GridControlBar> {examplePhotos.map((photo) => ( <Photo src={photo} key={photo} /> ))} </Grid> </div> ); } |
As you can see we are importing the react-instagram-ui-kit
library at the top and then we are declaring an array of images
from picsum and then we are rendering out the user profile
component where we are attaching the pic
from picsum for the user avatar and then we have text for the name
of the person and the followers and the biography of the user. And then we have the grid
where the user
uploaded images will be shown as shown below. And for displaying the images we are using the map
operator to iterate over each image and display it.