React scroll element into view

Question

I am rendering a calendar component, which is again rendering a Month component based on a months array:

{
  months.map(month =>
   <div style={{marginBottom: "35px"}} key={month}>
     <Month
       monthName={this.renderMonthName(month)}
       daysOfMonth={Object.keys(calendarDays).filter(day => new Date(day).getMonth() === month)}
       calendarDays={calendarDays}
       year={this.state.year}
     />
   </div>
  )
}

The result is a long list of single months:

However, what I want is that once the calendar component is rendered it should scroll to the current month (otherwise users have to scroll down manually to the current month).

I know about refs in React but I'm no sure how to apply this here. Is there a way to scroll to, let's say, e. g. the key of each rendered Month component?

not sure what you want but a simple search got me [this](https://www.npmjs.com/package/react-scroll-into-view) — Kevin He, Feb 10 '19 at 18:03
what i want: at the moment "januar 2019" (german for "january 2019") is on top when the calendar view renders. however, now it is february so i want the component to scroll to "februar 2019". i try to do this without a third-party package. — Oliver, Feb 10 '19 at 18:09
hmm then you can probably try [this](https://www.w3schools.com/jsref/met_element_scrollintoview.asp), with `align` set to true — Kevin He, Feb 10 '19 at 18:12

score 0 · Answer 1 · answered Feb 11 '19 at 01:50

Best answer that doesn't need nitty gritty Javascript code is answer from this question

https://stackoverflow.com/a/49842367/3867490

You can hook it up at the componentDidMount hook of your react app so it will only run whenever the component was mounted.

Code is here, might be ugly but you can get the idea from here.

class Hello extends React.Component {
    constructor(props){
    super(props);
    this.IsCurrentMonth = this.IsCurrentMonth.bind(this);
    this.ScrollToCurrentMonth = this.ScrollToCurrentMonth.bind(this);
        this.state = {
        months: ['January', 'February','March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December'],
      currentMonth :  new Date().getMonth(),
    }  
  }

  componentDidMount(){
    this.ScrollToCurrentMonth();
  }
  IsCurrentMonth(toCompare){
    if(this.state.currentMonth === toCompare){
        return 'calendar_active';
    }
    return;

  }

  ScrollToCurrentMonth(){
  var myElement = document.getElementsByClassName('calendar_active')[0];
    const y = myElement.getBoundingClientRect().top + window.scrollY;
window.scroll({
  top: y,
  behavior: 'smooth'
});  

  }

  render() {
    return (
    <div className={this.state.currentMonth}>
    {
    this.state.months.map((month, index) =>{

            return <div className={`month ${this.IsCurrentMonth(index)}`  }>{month}</div>
    })


    }

</div>

    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

See the working fiddle here https://jsfiddle.net/keysl183/f9ohzymd/31/

React scroll element into view

1 Answers1