Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

168
Views
How can the npm package react-virtualized be used with a resizable form input?

react-virtualized exposes the relevant components List, CellMeasurer and CellMeasurerCache. These can be used together reliably to create a virtualised list with dynamically calculated row heights as long as no form components are used. I am having great difficulty getting the API to respond to multiline form inputs, the heights calculated correspond to to the size of each component had the multiline inputs not expanded to accommodate the text passed in from state.

const cache = new CellMeasurerCache({
   fixedWidth: true,
   minHeight: 56,
})

 const rowRenderer = ({index, key, parent, style}) => {

// State pulled from API

       return <CellMeasurer
           cache={cache}
           columnIndex={0}
           key={key}
           rowIndex={index}
           parent={parent}
           >
           {({registerChild}) => (
               <div style={style}>
                   <Input multiline value={state.elements[index].text}/>
               </div>
           )}
       </CellMeasurer>
   }

return  <List
  width={650}
  height={600}
  deferredMeasurementCache={cache}
  overscanRowCount={2}
  rowHeight={cache.rowHeight}
  rowCount={state.elements.length}
  rowRenderer={rowRenderer}
  />
}

thanks

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!