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>
    )
  }
}

Adding hover color

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

| 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):

<tr>
    <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/v-excelsior">
            <img src="https://avatars3.githubusercontent.com/u/15347646?s=460&u=a585863c8d898ac96b97e483fc33dcd31e2b9ae4&v=4" width="100px;" alt="" /><br />
            <sub><b>Dmytro Vakuliuk </b></sub>
        </a>
        <br />
        <a href="https://github.com/AmineVolk/react-rounded-image/commits?author=v-excelsior" title="Code">💻</a>
    </td>
    <td align="center">
        <a href="https://github.com/nemzyxt">
            <img src="https://avatars.githubusercontent.com/u/94122064?v=4" width="100px;" alt="" /><br />
            <sub>
                <b>Nemuel Wainaina</b>
            </sub>
        </a>
        <br />
        <a href="https://github.com/AmineVolk/react-rounded-image/commits?author=nemzyxt" title="Code">💻</a>
    </td>
</tr>

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.