react-rounded-image

Convert an image into a rounded image

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

Adding hover color

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

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 💻

Nemuel Wainaina 💻

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.