DEV Community: Yosra Skhiri

Rating Stars in React js

Yosra Skhiri — Wed, 25 Nov 2020 19:50:59 +0000

Rating stars are a classic UI component used in most apps that implement an evaluating system. In this article, we're going to see how it could be done.
the following gif displays the final result of this tutorial, so keep reading 😊.

If you want to jump straight to the final code, you can skip all the explanation and get to the end of the article.

First, create the component folder in the src folder, the component folder is going to hold our RatingStars.js and the Star.js files. for the CSS, we will use a style.css file that will be imported in the App.js component, the style.css file resides in the src folder and will contain all the CSS rules needed.

In the RatingStars component, since we need 5 rating grades, I used an array to store those grades as strings like so:

const GRADES = ['Poor', 'Fair', 'Good', 'Very good', 'Excellent'];

In the RatingStars component, I mapped through the GRADES array to display a star for every value and I passed the index of each value as a prop to the Star component. for the key prop, I passed the grade.
As mentioned in the documentation:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

If you want to read more about the key prop.
The h1 is meant to display the result of the review that is made by the user, it's going to stay empty for now.

We also added some CSS classes that we're going to write later.

import React from 'react';
import Star from './Star';

const RatingStars = () => {
    const GRADES = ['Poor', 'Fair', 'Good', 'Very good', 'Excellent'];

    return (
        <div className="container">
            <h1 className="result"></h1>
            <div className="stars">
                {
                    GRADES.map((grade, index) => (
                        <Star 
                            index={index} 
                            key={grade}
                        />
                    ))
                }
            </div>
        </div>
    );
}

export default RatingStars;

Now let's make the star component, I used the star svg from iconsvg.
I associated every star with a radio button that has the index of the grade in the GRADES array as a value and grouped the SVG element and the radio input element by the label element.

import React from 'react';

const Star = (props) => {

    return (
        <label className="star">
            <input
                type="radio"
                name="rating"
                id={props.grade}
                value={props.index}
                className="stars_radio-input"
            />
            <svg 
                width="58" 
                height="58" 
                viewBox="0 0 24 24" 
                fill="none" 
                stroke="#393939" 
                strokeWidth="1" 
                strokeLinecap="round" 
                strokeLinejoin="round" 
            >
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
        </label>
    );
}

export default Star;

So far, this is what our app looks like:

Now, it's time to make it prettier. inside the styles.css file write the following classes:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

we're using the universal selector to reset the padding and the margin and also set the box-sizing as a border box which will help us size the elements. For more info about this property see the MDN web docs

.container {
  padding: 16px;
  margin: 16px auto;
}

The .container class takes care of the spacing.

.result {
  text-align: center;
  margin-bottom: 16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

The .result class is applied to h1 element in the RatingStars component.

.stars {
  display: flex;
  justify-content: center;
  gap: 8px;
}

Concerning the stars class that wraps all the stars, we're using flex value for the display properly, which will display the flex items (stars) horizontally, with a gap of 8px between each star.

.star {
  position: relative;
  cursor: pointer;
}

For every star, we added a pointer cursor to insinuate to the user that the star is clickable. The position relative is going to help us later position the radio button.

.stars_radio-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

This is going to visually hide the radio button.

.stars_radio-input:checked ~ svg {
  fill: yellow;
}

This is a temporary class that we're going to use to just verify if the star is checked or not.

Since we're going to display the rating result in the RatingStar component, we need to lift the state from the child component that is the Star.js to the parent component that is the RatingStar.js.
If you want to read more about lifting state: React Docs

To start making this work we need to declare a state in the parent component to store the grade's index:

const [gradeIndex, setGradeIndex] = useState();

This is the function used for setting the state in the parent component, and that we're going to pass it to the child component as a prop.

    const changeGradeIndex = ( index ) => {
        setGradeIndex(index);
    }

And this the function that we're going to use in Star.js component in order to update the state in the parent component.

const changeGrade = (e) => {
        props.changeGrade(e.target.value);
    }

Also, we'll attach an onClick event on the radio button in Star.js that will trigger the changeGrade function.

onClick={changeGrade}

Inside the h1 in RatingStars.js component, we used a ternary operator to display the value of the state only when the state is defined.

<h1 className="result">
   { GRADES[gradeIndex] ? GRADES[gradeIndex] : 'You didn\'t review yet'}
</h1>

Now, this is how our app looks like:

To make it behave more like the classic star rating UI component, we need to add the color yellow to the stars dynamically.
the activeStar object is declared and assigned in the RatingStars.

const activeStar = {
        fill: 'yellow'
    };

Then, pass it as a prop to the Star.js, we also used a ternary operator here because we only want the clicked star along the previous stars starting from the left to have the color yellow.

style={ gradeIndex > index ? activeStar : {}}

Add the style attribute to the svg element.

<svg
   width="58" 
   height="58" 
   viewBox="0 0 24 24" 
   fill="none" 
   stroke="#393939" 
   strokeWidth="1" 
   strokeLinecap="round" 
   strokeLinejoin="round" 
   style={props.style}
>

Abd don't forget to delete the .stars_radio-input:checked ~ svg from the style.css, since we don't need it anymore.

Finally, this is the whole code:

src\components\RatingStars.js

import React, { useState } from 'react';
import Star from './Star';

const RatingStars = () => {
    const [gradeIndex, setGradeIndex] = useState();
    const GRADES = ['Poor', 'Fair', 'Good', 'Very good', 'Excellent'];
    const activeStar = {
        fill: 'yellow'
    };

    const changeGradeIndex = ( index ) => {
        setGradeIndex(index);
    }

    return (
        <div className="container">
            <h1 className="result">{ GRADES[gradeIndex] ? GRADES[gradeIndex] : 'You didn\'t review yet'}</h1>
            <div className="stars">
                {
                    GRADES.map((grade, index) => (
                        <Star 
                            index={index} 
                            key={grade} 
                            changeGradeIndex={changeGradeIndex}
                            style={ gradeIndex > index ? activeStar : {}}
                        />
                    ))
                }
            </div>
        </div>
    );
}

export default RatingStars;

src\components\Star.js

import React from 'react';

const Star = (props) => {

    const changeGrade = (e) => {
        props.changeGradeIndex(e.target.value);
    }

    return (
        <label className="star">
            <input
                type="radio"
                name="rating"
                id={props.grade}
                value={props.index}
                className="stars_radio-input"
                onClick={changeGrade}
            />
            <svg 
                width="58" 
                height="58" 
                viewBox="0 0 24 24" 
                fill="none" 
                stroke="#393939" 
                strokeWidth="1" 
                strokeLinecap="round" 
                strokeLinejoin="round" 
                style={props.style}
            >
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
        </label>
    );
}

export default Star;

src\style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  padding: 16px;
  margin: 16px auto;
}

.result {
  text-align: center;
  margin-bottom: 16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.stars {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.star {
  position: relative;
  cursor: pointer;
}

.stars_radio-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

Make an image preview in React js

Yosra Skhiri — Wed, 18 Nov 2020 02:53:56 +0000

It is a cool UI interaction when apps show a preview of the added image to the user before they upload it to the server. This post explains how to achieve that using React js.

We're going to use a functional component called ImgPrev.js, the placeholder image is needed to be (you guessed it) a placeholder for the img tag, we also need to import the CSS style file to complete the magic.
This is the photo I used as a placeholder (If you can't see it, it's because the photo is white, but trust me it's there! 😄).



import React, { useState } from 'react';
import placeholder from '../images/placeholder.png';
import './style.css';

const ImgPrev = () => {
   return(
      <form></form>
   );
}

export default ImgPrev;

Now let's talk a little bit about that stylesheet.



/* This is used to reset the default styles 
applied to every element in this app */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.form__title {
    margin: 32px 0;
    text-align: center;
    color: #002952;
}

.form__img-input-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: auto;
}

/* this class is used to hide the file input */
.visually-hidden {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* Adding the focus and focus-within styles for accessibility */
input.visually-hidden:focus + label,
input.visually-hidden:focus-within + label {
    outline: 8px solid rgba(86, 206, 239, .4);
}

/* The file input is a labeled control, and since we hid it, 
we're going to use its associated label to trigger it */
.form-img__file-label {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(245, 245, 231, .3);
}

.form-img__file-label:hover {
    background-color: rgba(245, 245, 231, .5);
}

.form-img__file-label > svg {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: .7;
    transform: translate(-50%, -50%);
}

.form-img__file-label:hover > svg {
    opacity: 1;
}

/* The image element is going to be positioned under the 
label element, since the label is a see through, we're going 
to be able to see the preview of the image. */
.form-img__img-preview {
    display: block;
    width: 300px;
    height: 300px;
    object-fit: contain;
    border-radius: 50%;
    border: 16px rgb(80, 199, 235) solid;
}

To hide the file input I used the style rules mentioned in this MDN page.

Our component is going to return some JSX code that includes the file input wich will accept only these types of files: png, jpg and jpeg, as soon as the user clicks on the label and chooses (or cancels) an image, the handleImg method will fire, and the img tag will display (or not) the chosen image by the user.



return (
        <form encType="multipart/form-data">
            <h1 className="form__title">Image Preview in Reactjs</h1>
            <div className="form__img-input-container">
                <input 
                    type="file" 
                    accept=".png, .jpg, .jpeg" 
                    id="photo" 
                    className="visually-hidden"
                    onChange={handleImg}

                />
                <label htmlFor="photo" className="form-img__file-label">
                    <svg width="150" height="150" viewBox="0 0 24 24" fill="none" stroke="#56ceef" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3" />
                        <circle cx="12" cy="10" r="3" />
                        <circle cx="12" cy="12" r="10" />
                    </svg>
                </label>
                <img src={src} alt={alt} className="form-img__img-preview"/>
            </div>
        </form>
    );

To make sure that our image is being displayed we need to use a state to store it and this will ensure that in every state update the component will be re-rendered and every time that happens, the component will preview the chosen image.
Our state stores the src and the alt attributes of the image tag and has the placeholder and 'Upload an Image' as the default values.



const [{alt, src}, setImg] = useState({
        src: placeholder,
        alt: 'Upload an Image'
});

In the handleImg method, we need to check first if the user chose an image or not, if we don't, this error will appear TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed..
inside the if statement, the state is being updated by creating a URL that points to the image we're going to preview, we're also updating the alt attribute using the image's name.

Finally, this is the whole component:



import React, { useState } from 'react';
import placeholder from '../images/placeholder.png';
import './style.css';

const ImgPrev = () => {
    const [{alt, src}, setImg] = useState({
        src: placeholder,
        alt: 'Upload an Image'
    });

    const handleImg = (e) => {
        if(e.target.files[0]) {
            setImg({
                src: URL.createObjectURL(e.target.files[0]),
                alt: e.target.files[0].name
            });    
        }   
    }

    return (
        <form encType="multipart/form-data">
            <h1 className="form__title">Image Preview in Reactjs</h1>
            <div className="form__img-input-container">
                <input 
                    type="file" 
                    accept=".png, .jpg, .jpeg" 
                    id="photo" 
                    className="visually-hidden"
                    onChange={handleImg}
                />
                <label htmlFor="photo" className="form-img__file-label">
                    <svg width="150" height="150" viewBox="0 0 24 24" fill="none" stroke="#56ceef" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3" />
                        <circle cx="12" cy="10" r="3" />
                        <circle cx="12" cy="12" r="10" />
                    </svg>
                </label>
                <img src={src} alt={alt} className="form-img__img-preview"/>
            </div>
        </form>
    );
}

export default ImgPrev;

And this is what it would look like in the browser:

How to upload an image using MERN stack

Yosra Skhiri — Mon, 16 Nov 2020 15:18:17 +0000

I'm currently learning the MERN stack by making a project, one of this project's functionalities is to create a user profile, by doing so I needed to implement a file input in the form in order to add the user's profile picture, and this is where I got stuck! the process of uploading a photo seemed complicated but don't worry I figured out (hence the title).

Setting up the project

Inside the project's folder, I made two folders: frontend and backend

|
|-- project
    |
    |-- frontend
    |-- backend

Setting up the frontend part

First cd into the frontend folder

cd frontend

Then set up your react app

npx create-react-app .

we're also going to upload the axios package which is a promise-based HTTP client for the browser and node.js.

npm i axios

Now let's get to coding, create a User.js component in the src folder.
the data that we're sending to the server includes name, birth date, and a photo that could only be a png, jpg, or jpeg.

import React, { useState } from 'react';
import axios from 'axios';

const User = () => {
    const [newUser, setNewUser] = useState(
        {
            name: '',
            birthdate: '',
            photo: '',
        }
    );

    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('photo', newUser.photo);
        formData.append('birthdate', newUser.birthdate);
        formData.append('name', newUser.name);

        axios.post('http://localhost:5000/users/add/', formData)
             .then(res => {
                console.log(res);
             })
             .catch(err => {
                console.log(err);
             });
    }

    const handleChange = (e) => {
        setNewAuthor({...newUser, [e.target.name]: e.target.value});
    }

    const handlePhoto = (e) => {
        setNewAuthor({...newUser, photo: e.target.files[0]});
    }

    return (
        <form onSubmit={handleSubmit} encType='multipart/form-data'>
            <input 
                type="file" 
                accept=".png, .jpg, .jpeg"
                name="photo"
                onChange={handlePhoto}
            />

            <input 
                type="text"
                placeholder="name"
                name="name"
                value={newUser.name}
                onChange={handleChange}
            />

            <input 
                type="date"
                name="birthdate"
                value={newUser.date}
                onChange={handleChange}
            />

            <input 
                type="submit"
            />
        </form>
    );
}

export default User;

Import the User component inside App.js

import './App.css';
import './User';

function App() {
  return (
    <User />
  );
}

export default App;

Setting up the backend part

In the backend folder, we need to upload the needed packages:

npm i express cors mongoose multer uuid

Here's the reason why we need these packages:

express: is a minimalist web framework for node
cors: is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options, according to the cors package repository
mongoose: Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment.
multer: is a node.js middleware for handling multipart/form-data.
uuid: is a package that generates random and unique ids, I use it in this project to make sure that every uploaded image has a unique name.

create app.js

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');

const app = express();
require('dotenv').config();

const port = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());

const uri = process.env.ATLAS_URI;
mongoose.connect(uri, { useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true});

const connection = mongoose.connection;
connection.once('open', () => {
    console.log('mongo DB success');
});

const userRouter = require('./routes/users');
app.use('/users', userRouter);

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

Create .env file and store in it the port and your atlas URI.
Make a routes folder and create user.js inside it; also create the images folder inside the backend folder.

const router = require('express').Router();
const multer = require('multer');
const { v4: uuidv4 } = require('uuid');
let path = require('path');
let User = require('../models/user.modal');

const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, 'images');
    },
    filename: function(req, file, cb) {   
        cb(null, uuidv4() + '-' + Date.now() + path.extname(file.originalname));
    }
});

const fileFilter = (req, file, cb) => {
    const allowedFileTypes = ['image/jpeg', 'image/jpg', 'image/png'];
    if(allowedFileTypes.includes(file.mimetype)) {
        cb(null, true);
    } else {
        cb(null, false);
    }
}

let upload = multer({ storage, fileFilter });

router.route('/add').post(upload.single('photo'), (req, res) => {
    const name = req.body.name;
    const birthdate = req.body.birthdate;
    const photo = req.file.filename;

    const newUserData = {
        name,
        birthdate,
        photo
    }

    const newUser = new User(newUserData);

    newUser.save()
           .then(() => res.json('User Added'))
           .catch(err => res.status(400).json('Error: ' + err));
});

module.exports = router;

and don't forget to make the user.modal.js in the modals folder

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const userSchema = new Schema({
    name: {
        type: String,
        required: true,
        trim: true
    }, 

    photo: {
        type: String
    },

    birthdate: {
        type: String
    }
});

const User = mongoose.model('User', userSchema);

module.exports = User;

And that's it! that's how you upload an image to the server.