How to use the react-flip-toolkit/es/core function in react-flip-toolkit

To help you get started, we’ve selected a few react-flip-toolkit examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github atomiks / tippyjs / website / src / components / TippyTransition.js View on Github external
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

react-flip-toolkit

Configurable FLIP animation helpers for React

MIT
Latest version published 6 months ago

Package Health Score

75 / 100
Full package analysis

Popular react-flip-toolkit functions