Hello again. I believe you came here after reading 2 previous parts of this blog where I showed how to set up the environment, create a Photo Uploader, and how to upload user photos to the cloud service. In this last part I am going to render custom user avatars in React App. There are links on 1st and 2nd parts of this blog in case if you need to go back to it.
Please ensure that Component responsible for fetching users (in my App is TechniciansContainer.js) get response — array of users with photo attachment.
I keep this array in the component’s state and use getTechnicians() method to render Technician component for each technician in the array. The rest of the work is gonna be in Techniciancomponent.
First of all I need to install Cloudinary Library into React frontend.
Technician npm install cloudinary-react --save
On top of Technician component:
import {Image} from 'cloudinary-react’
In render() method:
<Image> .
You need to provide it with a few configuration parameters:
cloudName - the name associated with your Cloudinary account.
public_id - the unique identifier of the image. In other word it is an image id on Cloudinary which I get in a fetch response as .photo .
The other parameters are optional and serve to modify the image.
gravity determines which part of the image to keep when image is cropped.
radius rounds the specified corners of an image:
There are so many filters and ways to cut the image. All other parameters you can find here. Also this link might be helpful.
I hope my blog helped someone to expand their knowledge and create great user avatars. Thank you for reading!
