How do I use useRef on a component that I don't have access to in React BigCalendar

Question

I'm using React Big calendar (https://github.com/intljusticemission/react-big-calendar) and I'm working on some responsive styling which involves detaching the overflow-x (horizontal scrollbar) of a div specifically .rbc-agenda-view and attaching it to the browser window. For reference .rbc-agenda-view renders within the .rbc-calendar div i.e. the BigCalendar component.

My question is: How can I use useRef() on the .rbc-agenda-view if I don't have access to it's component. The BigCalendars component structure does not allow you to drill down to the inner components.

Any help with this would be appreciated.

Thanks in advance.

score 0 · Answer 1 · answered Jun 11 '19 at 16:23

0

I think you need to create the ref in a parent component (useRef or React.createRef) and pass it along to the component you are interested in.

Something like:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <MyBigCalendarWrapper ref={this.myRef} />;
  }
}

answered Jun 11 '19 at 16:23

jsdeveloper

3,945
1
15
14

My question states that I do not have access to the component that generates the .rbc-agenda-view div and respective class. Therefore I cannot add a ref to it. – cwiggo Jun 11 '19 at 16:36
In that case, You can probably use the ref of a container/wrapper component to BigCalendars component - it should resolve when the calendar loads – jsdeveloper Jun 11 '19 at 19:08

How do I use useRef on a component that I don't have access to in React BigCalendar

1 Answers1