react-rounded-image

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-rounded-image
2.0.149 months ago4 years agoMinified + gzip package size for react-rounded-image in KB

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):
<td align="center"><a href="https://github.com/AmineVolk"><img src="https://avatars1.githubusercontent.com/u/37228315?v=4" width="100px;" alt=""/><br /><sub><b>HamdiAmine</b></sub></a><br /><a href="https://github.com/AmineVolk/react-rounded-image/commits?author=AmineVolk" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/vakyla98"><img src="https://avatars3.githubusercontent.com/u/15347646?s=460&u=a585863c8d898ac96b97e483fc33dcd31e2b9ae4&v=4" width="100px;" alt=""/><br /><sub><b>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.