Merri/react-lazy

Noscript

Closed this issue · 1 comments

Can we disable noscript ? Because there is a conflict with another component that I use

Merri commented

Can you give more details about the conflict?

At the moment the only way you can achieve this is by providing a custom childWrapper component to LazyGroup which won't render dangerouslySetInnerHTML to the root element.

import { LazyGroup } from 'react-lazy'

// leave dangerouslySetInnerHTML out by destructuring it out of rest props
function WithoutNoscript({ childProps, children, dangerouslySetInnerHTML, isFailed, isLoaded, ...props }) {
    return (
        <div {...props}>
            {isFailed ? 'The image did not load :( ' + childProps.src : children}
        </div>
    )
}

...

    <LazyGroup component="li" childWrapper={WithoutNoscript}>
        <img {...imageProps} />
    </LazyGroup>