How to use react-flip-toolkit - 2 common examples

function onCreate(instance) {
    const {popper} = instance;
    const {tooltip, content, arrow} = instance.popperChildren;

    // Very first transition is jerky otherwise.
    content.style.willChange = 'transform';
    tooltip.style.textAlign = 'left';

    const flipper = new Flipper({element: popper});

    flipper.addFlipped({
      element: tooltip,
      // TODO: Make this unique if this component is used more than once
      flipId: 'tooltip',
      spring: 'veryGentle',
      onComplete() {
        popper.style.transitionDuration = `${child.props.updateDuration}ms`;
        popper.style.transitionProperty = '';
        component.instance.popperInstance.enableEventListeners();
        component.wasManuallyUpdated = false;
      },
      onSpringUpdate(springValue) {
        if (component.wasInterrupted) {
          // Since the FLIP animation was interrupted, the popper's translation
          // begins at the tweened offset

onCreate(instance) {
    const {popper} = instance;
    const {tooltip, content, arrow} = instance.popperChildren;

    popper.style.transitionProperty = 'padding';

    // Very first transition is jerky otherwise.
    content.style.willChange = 'transform';
    tooltip.style.textAlign = 'left';

    flipper = new Flipper({element: popper});

    flipper.addFlipped({
      element: tooltip,
      flipId: 'tooltip',
      spring: 'veryGentle',
      onStart() {
        // .disable() hides the tippy by default now
        instance.popperInstance.disableEventListeners();
      },
      onComplete() {
        instance.enable();
        wasManuallyUpdated = false;
      },
      // We need to ensure the popper's translation animation is in concert with
      // the dimensions spring animation so it stays perfectly positioned
      // throughout