React-resize-image : React component for resizing image

[damaera]

React resize image

React component for resizing image on the fly with RSZ.io.
RSZ.IO is a free image resizing proxy that can resize images, change image formats and optimize images for your website.

Motivation

My website is slow because of my image is so big. And then i use rsz.io for resizing all of my in my website images. The result is it becomes so fast as lightning. So, why not make react components for wrapping images to be fast with rsz.io ?

Development

I use https://github.com/damaera/publish-react-component Boilerplate for publishing react component to npm, With testing and storybook.

here is the folder structure

The core of this component is just manipulating link with rsz.io. you can look at the code at /src/getRSZioUrl. With regex it check link at first, and then if it's link it's insert rsz.io before hostname and adding params if options available.

const getRSZioUrl = (src, options) => {
  let result = src

  // if is link
  if (/^https?:\/\//.test(src)) {
    result = result.replace(/^(https?:\/\/)/, '$1rsz.io/')
    if (options) {
      result += '?' + objectToParams(options)
    }
  }
  return result/*  */
}

Then wrap it to img components

const ResizeImage = (props) => {
  const { src, options, style, alt, resizeActive } = props

  return (
    <img
      src={resizeActive ? getRSZioUrl(src, options) : src}
      alt={alt}
      style={style}
    />
  )
}

Finally you can try the result here

Install

yarn add react-resize-image

Usage

import React, { Component } from 'react'
import ResizeImage from 'react-resize-image'

class componentName extends Component {
  render () {
    return (
      <ResizeImage
        src={src}
        alt="Tsunami bt hokusai"
        options={{ width: 200 }}
      />
    )
  }
}

export default componentName

Props

List of props components

Props	Desc
src	required image source, must be absolute path from http or https
alt	required image alt
resizeActive	optional for enabling or disabling resizer. For example if you using your localhost or local development environment, you should disable it.
options	optional RSZ.io options, for more options please visit http://rsz.io/
style	optional component style

---

Here is the demo

DEMO

Future

In the future it will add lazyload and animation feature

Contributing

Github: https://github.com/damaera/react-resize-image

You can fork the project, and install it locally. Then use this styleguide for contributing. https://github.com/airbnb/javascript/tree/master/react

---

Posted on Utopian.io - Rewarding Open Source Contributors

---

Comments

[eastmael]

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

[utopian.tip]

Hey @eastmael, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

[steemitstats]

@damaera, I always try to support who contribute to open source project, upvote you.

[eastmael]

Your contribution cannot be approved yet. See the Utopian Rules. Please edit your contribution to reapply for approval.

This is on the brink of being rejected because the perceived work/effort put into it seems not high enough to receive the bot's high upvote. As such, I'd like to bring the following items to your attention:

1. I went to the sample code site and it initially gave the ff. error: ModuleNotFoundError
   Could not find module in path: 'react-resize-image'
   • I had to click the refresh button beside the site link(https://kwor5q8oyo.codesandbox.io/)
2. Submitted projects must have a unique value. Redundant projects will not be accepted.
   • This project looks similar with react-image-resizer. The difference is you're module wraps http://rsz.io/ (your project's unique value)
3. Trivial code snippets, example code or simple templates will not be accepted.
   • I feel the project falling under 'simple templates' since it's just a wrapper of calls to http://rsz.io/ API; but I also accept the fact that most of the time, it's the simple solutions that work; if you plan to submit similar contributions in the future, I suggest adding a website or project where your tool is already in use - it adds a convincing touch to your contribution to be approved.

Please reply to this comment or get in touch with me in discord if you accept and understand what I wrote above.

You can contact us on Discord.
[utopian-moderator]

[damaera]

thanks for your time moderating @eastmael

This project is different with react-image-resizer.
My point is, it decreases the amount of bandwidth downloaded, with smaller images. Not like react-image-resizer that download the real image.

Let's say I have a 100KB image with 1024px x 1024px resolution. If we want to make it
200px x 200px, this project will download smaller images, maybe just 20KB rather than 100KB.

But i accept that this project is not enough.

[eastmael]

Thank you for understanding. Since this is just your third contribution, I accepted it. But I would like to suggest is to look for high impact contributions by contributing to projects that you perceive to be of value or start a high-value project of your own.

[damaera]

okay, next time I 'll look for high impact.
thank you.

[utopian-io]

Hey @damaera I am @utopian-io. I have just upvoted you!

Achievements

• You have less than 500 followers. Just gave you a gift to help you succeed!
• Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

• Vote for my Witness With SteemConnect
• Proxy vote to Utopian Witness with SteemConnect
• Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x