react-rounded-image

Convert an image into a rounded image and you can also change the circle's color

Usage no npm install needed!

<script type="module">
  import reactRoundedImage from 'https://cdn.skypack.dev/react-rounded-image';
</script>

README

react-rounded-image

Convert an image into a rounded image

NPM JavaScript Style Guide

Install

npm install --save react-rounded-image

Usage

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"
          borderRadius="70"
        />

        <ReactRoundedImage
          image={MyPhoto}
          roundedColor="#66A5CC"
          imageWidth="120"
          imageHeight="120"
          roundedSize="8"
          borderRadius="15"
        />

        <ReactRoundedImage image={MyPhoto} roundedSize="0" imageWidth="110" imageHeight="110" />
      </div>
    );
  }
}

Examples

Result

Adding hover color

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

Result

Properties

Propertie Description
image The image
imageWidth The image's width
imageHeight The image's height
roundedColor The rounded color
roundedSize The rounded size
hoverColor The hover color
borderRadius The border radius(default 50%)
hoverShadow Hover shadow animation (default false)

Contributors ✨

Thanks goes to these wonderful people (emoji key):


HamdiAmine

💻

Dmytro Vakuliuk

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

You can check out the full license here

This project is licensed under the terms of the MIT license.