search

twobin / react-lazyload

Lazy load your component, image or anything matters the performance.
MIT License
5.85k stars 487 forks source link

pass className to the wrapper span so that it can be styled #314

Open ucarbehlul opened 4 years ago

ucarbehlul commented 4 years ago

using styled components or by some other common css classes.

ameerthehacker commented 4 years ago

@ucarbehlul I'm unable to understand the problem, can you please elaborate

ucarbehlul commented 4 years ago

@ucarbehlul I'm unable to understand the problem, can you please elaborate

Some elements like adsense <ins> element needs parent container to have some width to be responsive. We can use the lazy-load element in below way to easily fix that issue:

import styled from 'styled-components'

const Wrapper = styled(LazyLoad)`
  width: 100%;
  @media (min-width: 576px) {
      display:none
  }
`;

if we don't use passed className prop styled components would not work. There may be other solutions to this problem but this is the most straightforward one if you are using styled components already.

joerdav commented 4 years ago

@ucarbehlul @ameerthehacker This feature would be extremely useful, we have no way of passing a custom class to the wrapper.

I'm also using styled components so this would help, a lot.