0

I'm trying to get started using react-virtualized, and I have been having a lot of trouble getting started. The documentation is very sparse.

I am trying to use the following example:

import { Grid, List, ScrollSync } from 'react-virtualized'
import 'react-virtualized/styles.css'; // only needs to be imported once

function render (props) {
return (
<ScrollSync>
  {({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => (
    <div className='Table'>
      <div className='LeftColumn'>
        <List
          scrollTop={scrollTop}
          {...props}
        />
      </div>
      <div className='RightColumn'>
        <Grid
          onScroll={onScroll}
          {...props}
        />
      </div>
    </div>
  )}
</ScrollSync>
)
}

I have it in a separate .tsx file. I am then trying to use it in the following component:

export class Container extends React.Component<any, any>{
constructor(props: any) {
    super(props);
    this.state = {
        modal: this.props.name,
    };
}


public render() {
    return <div>
        <div className="grid2" >
            <div className="containdiv">
                //I want it here
            </div >
        </div >
    </div>
}
}

Anyone more familiar with typescript and react-virtualized have an idea how I can get this working? Or have any secret documentation I wasn't able to find?

anesthetic
  • 295
  • 1
  • 12
  • Docs take a lot of time and effort to write and maintain. Particularly due to the maintenance aspect, RV doesn't tend to repeat docs sections. So the `ScrollSync` docs don't re-enumerate all supported params of their children. It just shows `{...props}` and assumes you'll also read the separate docs for `Grid` or `List` or whatever you plan to use inside of `ScrollSync`. Have you checked those other docs pages out yet? What have you tried so far (beyond an "I want it here" comment)? :) – bvaughn Dec 10 '17 at 15:52
  • PS. You can also find all of the code for RV's demo site in GitHub, along side of the source. For example the `ScrollSync` demo page source is here https://github.com/bvaughn/react-virtualized/blob/master/source/ScrollSync/ScrollSync.example.js – bvaughn Dec 10 '17 at 15:52
  • Yea I know it sounds like an "I want it here" comment, but honestly the info you've given is helpful and what I'm looking for. Thanks for your help – anesthetic Dec 10 '17 at 19:01
  • Glad it was helpful. :) – bvaughn Dec 10 '17 at 23:31

0 Answers0