React Tutorial – Creating a Social Card using Material UI

In this article, we will create a simple social card using react’s material UI framework.

The idea is to create 3 stateless components namely SocialCard, CardFront, CardBack. We will also be using flip animation so that whenever someone hovers the mouse on my front component it gets flipped and show the user the backside of the card.

  • SocialCard : the Main component which will render the other two components
  • CardFront: Front side of our card which will consist of personal detail.
  • CardBack: Backside of our card which will consist of form which will have detail for contacting that person.

Now let’s start writing the component:

CardFront


import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';

const style = makeStyles( theme => ({
                                root1 : {
                                    display:'flex',
                                    width : 550,
                                    height: 250,
                                    },
                                  details: {
                                    display: 'flex',
                                    flexDirection: 'column',
                                  },
                                content: {
                                    flex: '1 0 auto',
                                },
                                photo: {
                                    height: 200,
                                    width: 200,
                                },
                            })
                        )

const CardFront = () => {
        const classes = style()
        const photo = require("../photo.jpg");
    return(
            <Card className = {classes.root1} >
                <div className = {classes.detail} > 
                        <CardContent className = { classes.content}>
                            <Typography variant="h2">
                                Hatim Master
                            </Typography>
                        </CardContent>
                        <CardContent>
                            <Typography variant="caption" align = "justify">
                                <i> Computer Science Engineer </i>
                            </Typography>
                        </CardContent>
                    <CardContent>
                        <Typography variant="body2">
                         Full Stack developer, Machine learning expert. Have work expieriance of more than 6 year
                        </Typography>
                    </CardContent>
                </div>
                <CardMedia className = {classes.photo}
                            image = {photo}
                            title = "Hatim"/>
            </Card>
    )
}

export default CardFront;

Here we used hook API(makeStyle) to change some changes in the material UI style. Then we have used Cardcomponent provided by material UI to display the content. For our fonts to good and presentable, we will be using material UI Typographycomponent. Finally to display the image in our card we useCardMedia component.

OUTPUT:

React Material UI CardFront
Front Side

 

CardBack


import React from 'react';
import {makeStyles} from '@material-ui/core/styles'; 
import CardContent from '@material-ui/core/CardContent'; 
import Card from '@material-ui/core/Card'; 
import TextField from '@material-ui/core/TextField'; 
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
import Button from '@material-ui/core/Button';
 const style = makeStyles( theme => ({
    root1 : {
         display:'flex', 
         width : 550, 
         height: 250,  
         }, 
     content: { 
         flex: '1 0 auto', 
        }, 
     }) 
 ) 
 
const CardBack = () => {
      const classes = style()
      return(
          <Card className = {classes.root1} >
              <div>
                    <CardContent className = {classes.content}>
                          <TextField label="First Name" />
                    </CardContent> 
                    <CardContent className = {classes.content}>
                           <TextField label="Last Name" />
                     </CardContent> 
                     <CardContent className = {classes.content}>
                            <TextareaAutosize rowsMin = {4} placeholder="Message" />
                     </CardContent>
              </div>
              <div>
                     <CardContent className = {classes.content}>
                            <TextField label="Email"/>
                     </CardContent>
                     <CardContent className = {classes.content}>
                            <TextField label="Subject" />
                     </CardContent> 
                     <CardContent className = {classes.content}>
                            <Button variant="contained" color="primary"> Submit! </Button>
                     </CardContent>
              </div> 
 
          </Card> 
      ) 
} 

export default CardBack;

The backside of our card will contain a form that will consist of text fields in which the user will write their information and a submit button. Again we have used React’s [hook API] to change the certain value of material UI. For the input field, we have used the materialsTextField wrapper component. It is a complete form control component including input, label and helper text.

OUTPUT:

React Material UI CardBack
Back Side

 

SocialCard

Card.css :

.card{
  transform: translate(-50%,-50%);
  position:absolute;
}
.front,.back{
  overflow: hidden;
  backface-visibility: hidden;
  position: absolute;
  transition: transform .6s linear;
}
.front{
  transform: perspective(500px) rotateY(0deg);
}
.back{
  transform: perspective(500px) rotateY(180deg);
}
.card:hover > .front{
  transform: perspective(500px) rotateY(-180deg);
}
.card:hover > .back{
  transform: perspective(500px) rotateY(0deg);
}

import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import CardContent from '@material-ui/core/CardContent';
import Grid from '@material-ui/core/Grid';
import CardFront from './CardFront';
import CardBack from './CardBack';
import './Card.css';

const style = makeStyles( theme => ({
                                root : {
                                    marginTop: 75,
                                    display:'flex',
                                    width : 550,
                                    height: 250,
                                    },
                                content: {
                                    flex: '1 0 auto',
                                },
                            })
                        )

const SocialCard = () => { 
    const classes = style();
    return (
        <Grid container justify = "center" alignItem = "cetner" >
        <div className = {classes.root} >
            <div className="card">

                <div className="front">
                    <CardContent className = {classes.content}>
                                <CardFront />
                    </CardContent>
                </div>

                <div className="back">
                    <CardContent className = {classes.content}>
                            <CardBack />
                    </CardContent>
                </div>
                </div>
            </div>
        </Grid>
    )
}

export default SocialCard;

This component bind the CardBack and CardFront component together. The Grid component of material UI is used to place the card at the center of the screen. For flipping animation, we have used CSS transition and transform attributes.

OUTPUT:

React Material UI Card
Result

 

Sharing is caring!

2 thoughts on “React Tutorial – Creating a Social Card using Material UI”

  1. Long time supporter, and thought I’d drop a comment.

    Your wordpress site is very sleek – hope you don’t mind me asking what theme you’re using?
    (and don’t mind if I steal it? :P)

    I just launched my site –also built in wordpress like yours– but
    the theme slows (!) the site down quite a bit.

    In case you have a minute, you can find it by searching for “royal cbd” on Google (would appreciate any feedback) – it’s still in the works.

    Keep up the good work– and hope you all take care of yourself during the coronavirus
    scare!

Leave a Comment

Your email address will not be published. Required fields are marked *

shares
Scroll to Top