React.js Project to Crop Image in Rounded or Circular Shape with Colorful Borders Using react-rounded-image Library in Javascript Full Tutorial For Beginners

React.js Project to Crop Image in Rounded or Circular Shape with Colorful Borders Using react-rounded-image Library in Javascript Full Tutorial For Beginners

 

Welcome folks today in this post we will be cropping image in rounded or ciruclar shape with colorful borders in javascript. All the full source code of application is given below.

 

 

 

Get Started

 

 

 

In order to get started you need to install the following library into your react.js project

 

npm i react-rounded-image

 

After you install this just make a App.js file inside the react.js project and copy paste the following code to it

 

import React, { Component } from "react";
import ReactRoundedImage from "react-rounded-image";
import MyPhoto from "./images/me.jpg";
 
export default class App extends Component {
  render() {
    return (
      <div style={{ display: "flex" }}>
        <ReactRoundedImage image={MyPhoto} />
        <ReactRoundedImage
          image={MyPhoto}
          roundedColor="#321124"
          imageWidth="150"
          imageHeight="150"
          roundedSize="13"
        />
 
        <ReactRoundedImage
          image={MyPhoto}
          roundedColor="#66A5CC"
          imageWidth="120"
          imageHeight="120"
          roundedSize="8"
        />
 
        <ReactRoundedImage image={MyPhoto} roundedSize="0" imageWidth="110" imageHeight="110" />
      </div>
    );
  }
}

 

See also  Join 10 React.js and React Native Whatsapp Group Links For Javascript Web Developers in 2021 | React.js Whatsapp Group Links For Web Developers | Whatsapp Group Links For React.js Javascript Programmers

 

 

 

 

 

Adding hover color

 

 

<ReactRoundedImage
  image={MyPhoto}
  roundedColor="#321124"
  imageWidth="150"
  imageHeight="150"
  roundedSize="13"
  hoverColor="#DD1144"
/>

 

Leave a Reply