Instance Methods

Additional methods are available on timeline objects when you have a reference to an instance of a timeline. Refs provide a way to access React elements created in the render method. For example, when you have a ref to a timeline, you can call the fit method which will adjust the view to make all timeline items visible. See the API Reference for more details.

For information about giving your test framework access to your timeline, see Useful Instance Methods.

Creating a ref in a stateful component

This example uses the React.createRef() API, introduced in React 16.3. If you are using an earlier release of React we recommend using callback refs instead.

class MyStatefulComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.timeline = React.createRef();
  }

  fitToView = () => {
    this.timeline.current.fit();
  };

  render = () => {
    const { items } = this.props;
    return (
      <>
        <Timeline ref={this.timeline} items={items} />
        <button onClick={this.fitToView}>
          Show all items
        </button>
      </>
    );
  };
}

Creating a ref in a functional component

If you are using React 16.8 or above then you have access to the hooks API and can use the useRef() hook in your functional components.

const MyFunctionalComponent = (props) => {
  const { items } = props;
  const timelineRef = React.useRef(null);

  const fitToView = () => {
    timelineRef.current.fit();
  };

  return (
    <>
      <Timeline ref={timelineRef} items={items} />
      <button onClick={fitToView}>
        Show all items
      </button>
    </>
  );
};