Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Ghost
    @ghost~591b6446d73408ce4f600755
    Hey! I saw the note when making a new issues so I figured I'd check here to see if anyone is around first!
    Claudéric Demers
    @clauderic
    Hey, what's up?
    Ghost
    @ghost~591b6446d73408ce4f600755
    I'm noticing some intense visual glitching – as if an item is flickering in opacity – when I switch from rendering an item in the renderItem function to rendering a component
    Claudéric Demers
    @clauderic
    Hmm, not sure I understand. Can you share some code?
    Ghost
    @ghost~591b6446d73408ce4f600755
    Sure sure!

    When I do something like:

          <VirtualList
            width='100%'
            height={600}
            itemCount={clips.length}
            itemSize={80}
            renderItem={({index, style}) =>
              <div key={index} style={style} index={index}>
                  <h2>{ clips[index].id }</h2>
              </div>
            }
          />

    Everything is smooth and great!
    But switching to an imported/external component, like this:

          <VirtualList
            width='100%'
            height={600}
            itemCount={clips.length}
            itemSize={80}
            renderItem={({index, style}) =>
              <Clip key={index} style={style} id={clips[index].id} index={index}/>
            }
          />

    I start seeing visual glitches, like this: https://cl.ly/1a1n0a3W0K20

    Claudéric Demers
    @clauderic
    Hmm that's certainly odd
    What does the implementation of Clip look like
    Ghost
    @ghost~591b6446d73408ce4f600755
    I've tried it with and without styled-components, but it's not much fancier:
    const ClipContainer = styled.div`
      height: 60px;
      padding: 10px 1.618rem;
      border: ${ props => `1px solid ${props.theme.subtle}` };
    `
    
    class Clip extends Component {
      render () {
        const { id } = this.props
        return (
          <ClipContainer>
            <H3>{id}</H3>
          </ClipContainer>
        )
      }
    }
    Claudéric Demers
    @clauderic
    I haven't used styled components much. It looks like you're not passing the style object though
    It contains the absolute position coordinates of the item to properly position it as you scroll
    Ghost
    @ghost~591b6446d73408ce4f600755
    Oh hm, that's a fair point. I assumed the style property would overtake the pre-existing styles
    Claudéric Demers
    @clauderic
    I don't know how to do this with styled components, but you can usually use the spread operator to combine it with other styles
    Something like:
    style={{display: 'block', color: 'red', ...props.style}}
    Ghost
    @ghost~591b6446d73408ce4f600755
    yeah that make sense – let me look into that! that's a smart observation
    Claudéric Demers
    @clauderic
    I think you can just import { css } from 'styled-components'
    Ghost
    @ghost~591b6446d73408ce4f600755
    holy crap you're a genius!
    I think that was totally it
    how silly I missed that, but thank you thank you
    Claudéric Demers
    @clauderic
    And then do something along these lines:
    const ClipContainer = styled.div`
      height: 60px;
      padding: 10px 1.618rem;
      border: ${ props => `1px solid ${props.theme.subtle}` };
     ${css(props.style)}
    `
    Ghost
    @ghost~591b6446d73408ce4f600755
    oh snap i did not know that was possible
    Claudéric Demers
    @clauderic
    Haha no worries man! Glad it was a simple issue
    I'm not 100% sure that syntax is valid, but based on https://github.com/styled-components/styled-components/blob/master/docs/tips-and-tricks.md#using-javascript-to-our-advantage it looks like something along those lines might be possible
    Thanks for checking on gitter before filing an issue :D
    Ghost
    @ghost~591b6446d73408ce4f600755
    Of course! Thanks also for making an awesome flipping library :smile:
    Claudéric Demers
    @clauderic
    You deserve a gold star :star2:, too few people take the time to read contribution guidelines
    Haha thanks man!
    Ghost
    @ghost~591b6446d73408ce4f600755
    Alright, back to it. Thanks again :sparkles:
    Dmitry
    @Dimon70007
    Hi there. Greate awesome lib. Thanks for your work. Could you help me please to understand how scrollOffSet should works on adding at the begin of list any items ? I just trying to make infinite sequense. And when i scrollToIndex - all work fine, but when i try to scrollOffSet - i get an empty part of old list. I think, there is no rerender on scrollOffSet. How i should fix it? P.S. Sorry for my bad english.
    Dmitry
    @Dimon70007
    Hm. it's strange, but i think that issue in my code, i have been tested this case in your lib and it also work fine.
    Dmitry
    @Dimon70007
    Could you show the example of call recomputeSizes method as React component?
    Dmitry
    @Dimon70007
    I found
    it was real issue
    Dmitry
    @Dimon70007
    I have created pullrequest with some fixes. Please apply it.
    Steve Wagner
    @lanwin
    Hi, I relly like react-tiny-virtual-list over react-virtualzed.
    But my question is: can I use this lib also als Window scroller? Mean full page size instead of a "iframe" like scroller?
    Shaked Klein
    @shakedko_twitter

    Hey, I am experiencing some issues with the list when attaching to iOS homescreen. Not sure if I should file a bug as I read it might be better to talk about it here first. I made a video of the issue using iPad mini 2:

    https://youtu.be/KIDnUovmGVo
    and an example
    https://pymwymi.io/clusterizejs/reactjs/index.html

    Omg sorry for this huge preview. Didn't expect this to happen :|
    Claudéric Demers
    @clauderic
    Hey @shakedko_twitter do you mind opening up an issue on github?
    Shaked Klein
    @shakedko_twitter
    @clauderic - yes, I will. Update: clauderic/react-tiny-virtual-list#33
    Weyert de Boer
    @weyert
    Hello
    Mário Gaudencio
    @mariobento

    Hello Guys.

    Having a state variable called "visibleIndex" set to 3
    and on VirtualList render scrollToIndex={visibleIndex}

    when i click a button that increments that variable it crashes with "Invalid offset NaN specified"

    the data list has 20+ items