Break the big component in compossable sub-components

[stereobooster]

Try to break IdealImage into subcomponents, so developer can choose what features to use, for example:

• disable network detection (Is there anyway to disable slow network detection? #25)
• disable retry in case of error and show default fallback (Fallback image #66)
• disable lazy load (Allow custom optional visibility observer #77)

Maybe try reakit approach or render-props#data.

[stereobooster]

Lazy load

Lazy load can be an example of such subcomponent (aka primitive). It will detect if component on the screen or not and render placeholder, component itself or error state. It will take load function which will return Promise (or Promise-like thing), because it will work with Promise-like thing it could also handle dynamic import. It will know how to handle SSR.

Similar existing components:

• react-virtual-container (based on react-async-component)
• react-loadable-visibility (based on react-loadable)

Size detector

Component which will detect size of placeholder, so Image component can decide which image to load based on the size.

Similar existing components:

• react-sizeme

Other

Network detector, image loader (function, not a component), timeout canceler (function)

• https://github.com/jxom/react-loads

[stereobooster]

I guess we can use React Hooks to try improve composability

[tuananh]

is there any update on how to disable network detection?

[hilja]

This is interesting.

Here's some messy pseudocode on how things could work, it uses the Compound Components pattern that gives control to the markup more.

import React from 'react'
import IdealImage, {
  Lazyload,
  Wrapper,
  Image,
  GifVideo
} from 'react-ideal-image'

class Component extends React.Component {
  state = {
    hasZoomOnClick: true
  }

  handleSlow = () => {
    window.alert(
      'Looks like you‘re on a slow network, we have disabled images...'
    )
  }

  handleFail = () => {
    this.setState({
      hasZoomOnClick: false
    })
  }

  render() {
    return (
      <div>
        <Lazyload threshold={500}>
          <Wrapper
            // Override styles right in the component
            style={{ maxWidth: this.props.data.imageWidth, height: 'auto' }}
          >
            <Image
              // I've noticed how I'd like to execute some code on various stages
              onOffline={this.handleOffline}
              onFail={this.handleFail}
              onSlowNetwork={this.handleSlow}
              dimensions={{ w: 200, h: 200 }}
              placeholder={{ lqip }}
              styles={{ foo: 'foo' }}
            />
          </Wrapper>
        </Lazyload>

        {/* Image-like videos which loops and autoplays */}
        <Lazyload threshold={500}>
          <Wrapper>
            <GifVideo src={this.props.data.video.src} posterImage={{ lqip }} />
          </Wrapper>
        </Lazyload>

        {/* If control in not needed, use the all-inclusive keys-in-hand-solution */}
        <IdealImage srcSet={...} />
      </div>
    )
  }
}

export default Component

[scarletks1214]

Can we customize the icons and messages?
I can't find any detailed document or tutorial.
Please help me customize them.
Thanks

[stereobooster]

https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#icons and https://github.com/stereobooster/react-ideal-image/blob/master/src/components/icons.js

<IdealImage {...props} getMessage={getMessage}  icons={icons} iconColor="#fff" iconSize={64} />

[scarletks1214]

Thanks for your reply. But I'd like to know in detail about icon customization. Your component looks good among other image components. But I can't find any detailed doc or tutorial or sample(except demo). Can you send me or explain me about icon customization in detail. Fan of your component. Thanks

…

On Mon, Feb 25, 2019 at 4:35 PM stereobooster ***@***.***> wrote: https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#icons and https://github.com/stereobooster/react-ideal-image/blob/master/src/components/icons.js <IdealImage {...props} getMessage={getMessage} icons={icons} iconColor="#fff" iconSize={64} /> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#81 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Aq-iafBiTPNlvuC5jITngIyShpanat7cks5vQ-aLgaJpZM4VQJ7_> .

[stereobooster]

Icons implemented as SVG in React component, you can read source code. Config implemented as key-value object where key is name and value is React component (SVG icon).