react-rounded-image

2.0.15 • Public • Published

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

💻

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.

Readme

Keywords

Package Sidebar

Install

npm i react-rounded-image

Weekly Downloads

344

Version

2.0.15

License

MIT

Unpacked Size

9.48 kB

Total Files

4

Last publish

Collaborators

  • amine-volk