### Install react-flip-toolkit

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Install the react-flip-toolkit library using npm or yarn. This is the first step to integrate FLIP animations into your React project.

```bash
npm install react-flip-toolkit
yarn add react-flip-toolkit
```

--------------------------------

### Spring Utility Example

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Demonstrates the usage of the 'spring' utility function provided by react-flip-toolkit to create custom spring animations. It shows how to configure animation values, handle updates, and manage completion callbacks.

```jsx
import { spring } from 'react-flip-toolkit';

spring({
  config: "wobbly",
  values: {
    translateY: [-15, 0],
    opacity: [0, 1]
  },
  onUpdate: ({ translateY, opacity }) => {
    el.style.opacity = opacity;
    el.style.transform = `translateY(${translateY}px)`;
  },
  delay: i * 25,
  onComplete: () => console.log('done')
});
```

--------------------------------

### React Flip Toolkit: Two Animated Divs Example

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Illustrates animating between two different div states (square and full-screen square) using react-flip-toolkit. This example shows how to conditionally render components within the Flipper context to trigger transitions.

```jsx
import React, { useState } from 'react'
import { Flipper, Flipped } from 'react-flip-toolkit'

const Square = ({ toggleFullScreen }) => (
  <Flipped flipId="square">
    <div className="square" onClick={toggleFullScreen} />
  </Flipped>
)

const FullScreenSquare = ({ toggleFullScreen }) => (
  <Flipped flipId="square">
    <div className="full-screen-square" onClick={toggleFullScreen} />
  </Flipped>
)

const AnimatedSquare = () => {
  const [fullScreen, setFullScreen] = useState(false)
  const toggleFullScreen = () => setFullScreen(prevState => !prevState)

  return (
    <Flipper flipKey={fullScreen}>
      {fullScreen ? (
        <FullScreenSquare toggleFullScreen={toggleFullScreen} />
      ) : (
        <Square toggleFullScreen={toggleFullScreen} />
      )}
    </Flipper>
  )
}
```

--------------------------------

### react-flip-toolkit staggerConfig Example

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Demonstrates how to configure staggered animations in react-flip-toolkit using the `staggerConfig` prop. This prop accepts an object where keys can define default stagger behavior or named stagger configurations, controlling properties like `reverse` and `speed` for animating child elements.

```javascript
staggerConfig={{
  // the "default" config will apply to staggered elements without explicit keys
      default: {
        // default direction is forwards
        reverse: true,
        // default is .1, 0 < n < 1
        speed: .5
      },
  // this will apply to Flipped elements with the prop stagger='namedStagger'
    namedStagger : { speed: .2 }
  }}
```

--------------------------------

### React Flip Toolkit: List Shuffling Animation

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Demonstrates how to animate the reordering of a list using react-flip-toolkit. This example uses lodash.shuffle to randomize the list order and updates the Flipper's flipKey to trigger the animation. It requires lodash.shuffle as a dependency.

```jsx
import React, { useState } from 'react'
import { Flipper, Flipped } from 'react-flip-toolkit'
import shuffle from 'lodash.shuffle'

const ListShuffler = () => {
  const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  const shuffleList = () => setData(shuffle(data))

  return (
    <Flipper flipKey={data.join('')}>
      <button onClick={shuffleList}> shuffle</button>
      <ul className="list">
        {data.map(d => (
          <Flipped key={d} flipId={d}>
            <li>{d}</li>
          </Flipped>
        ))}
      </ul>
    </Flipper>
  )
}
```

--------------------------------

### React Memoization for Performance

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Memoizes animated components using `React.memo` or `PureComponent` to prevent unnecessary reconciliation work before animations start. This can reduce delays when triggering complex FLIP animations.

```javascript
// Using React.memo
const AnimatedComponent = React.memo(MyComponent);

// Using PureComponent (for class components)
class AnimatedComponent extends React.PureComponent {
  // ... render method ...
}
```

--------------------------------

### Build and Commit flip-toolkit

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/CONTRIBUTING.md

Commands to build the flip-toolkit package, commit the changes with a versioned message, and publish it to npm.

```shell
yarn build
git commit -m 'flip-toolkit@<version>'
npm publish
```

--------------------------------

### Build and Commit react-flip-toolkit

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/CONTRIBUTING.md

Commands to upgrade the flip-toolkit dependency, build the react-flip-toolkit package, commit changes with a versioned message, and publish it.

```shell
yarn upgrade flip-toolkit@^<version>
yarn build
git commit -m 'react-flip-toolkit@<version>'
npm publish
```

--------------------------------

### Testing Commands

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/CONTRIBUTING.md

Commands to run tests for the project. Includes Jest and Mocha browser tests. Ensure all tests pass before proceeding with a release.

```shell
yarn test
yarn test:dom
```

--------------------------------

### Beta Version Publishing

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/CONTRIBUTING.md

Steps to publish a beta version of the package. This is useful for testing changes before a stable release.

```shell
npm version prepatch | preminor | premajor
npm publish --tag beta
```

--------------------------------

### React Flip Toolkit: Animated Expanding Div

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Demonstrates a simple animation where a div expands to full screen on click. It uses Flipper and Flipped components from react-flip-toolkit to manage the animation state. The primary dependency is the react-flip-toolkit library.

```jsx
import React, { useState } from 'react'
import { Flipper, Flipped } from 'react-flip-toolkit'

const AnimatedSquare = () => {
  const [fullScreen, setFullScreen] = useState(false)
  const toggleFullScreen = () => setFullScreen(prevState => !prevState)

  return (
    <Flipper flipKey={fullScreen}>
      <Flipped flipId="square">
        <div
          className={fullScreen ? 'full-screen-square' : 'square'}
          onClick={toggleFullScreen}
        />
      </Flipped>
    </Flipper>
  )
}
```

--------------------------------

### Formatting and Linting

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/CONTRIBUTING.md

Command to format code and fix linting issues. This ensures code consistency across the project.

```shell
yarn format-and-fix
```

--------------------------------

### Flipper Advanced Props

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Configuration options for the Flipper component to customize animation behavior, debugging, and portal support.

```APIDOC
Flipper Advanced Props:

- decisionData: any
  - Description: Allows animated children of Flipper to behave differently based on state transitions. Makes data available to `shouldFlip` and `shouldInvert` methods of child `Flipped` components.
  - Default: -

- debug: boolean
  - Description: Experimental prop that pauses animation at the initial application of FLIP-ped styles, allowing inspection of the animation's starting state.
  - Default: false

- portalKey: string
  - Description: Provides a unique key to scope element selections to the entire document, enabling animations for elements within portals. Prevents animations from working if portals are used without a portalKey.
  - Default: -

- onStart: function
  - Description: Callback prop invoked before any individual FLIP animations start. Receives the Flipper's HTMLElement and the decisionData object as arguments.
  - Default: -
```

--------------------------------

### Basic FLIP Animation with Flipper Class

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/packages/flip-toolkit/README.md

Demonstrates how to use the `Flipper` class from `flip-toolkit` to animate DOM elements. It covers adding flipped and inverted children, recording element states before and after updates, and triggering animations on user interaction.

```js
import { Flipper } from 'flip-toolkit'
const container = document.querySelector('.container')
const square = document.querySelector('.square')
const innerSquare = document.querySelector('.inner-square')

const flipper = new Flipper({ element: container })

// add flipped children to the parent
flipper.addFlipped({
  element: square,
  // assign a unique id to the element
  flipId: 'square',
  onStart: () => console.log('animation started!'),
  onSpringUpdate: springValue =>
    console.log(`current spring value: ${springValue}`),
  onComplete: () => console.log('animation completed!')
})

// to add an inverted child
// (so that the text doesn't warp)
// use this method with
// a reference to the parent element
flipper.addInverted({
  element: innerSquare,
  parent: square
})

square.addEventListener('click', () => {
  // record positions before they change
  flipper.recordBeforeUpdate()
  square.classList.toggle('big-square')
  // record new positions, and begin animations
  flipper.update()
})
```

--------------------------------

### React Flip Toolkit: Spring Customization Options

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Explains how to customize the animation spring behavior in react-flip-toolkit. Users can apply predefined spring presets like 'stiff', 'noWobble', 'gentle', 'veryGentle', or 'wobbly' via the `spring` prop on the Flipper component, or provide a custom configuration object for fine-grained control.

```jsx
// spring preset can be one of: "stiff", "noWobble", "gentle", "veryGentle", or "wobbly"
<Flipper flipKey='foo' spring='wobbly'>
  {/* Flipped components go here...*/}
</Flipper>
```

```jsx
<Flipper flipKey='foo' spring={{ stiffness: 280, damping: 22 }} >
  {/* Flipped components go here...*/}
</Flipper>
```

--------------------------------

### Spring Component API

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

The Spring component allows for custom spring configurations to be applied to animations, enabling fine-grained control over animation physics like stiffness and damping.

```APIDOC
Spring
  Props:
    config: object
      Description: Configuration object for the animation spring.
      Properties:
        stiffness: number (default: 170)
        damping: number (default: 26)
        mass: number (default: 1)
        overshootClamping: boolean (default: false)
      Example: { stiffness: 120, damping: 14 }

    children: (springProps: object) => ReactNode
      Description: A render prop that receives the animated values and applies them to its children.
```

--------------------------------

### Spring Utility for Non-FLIP Animations

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/packages/flip-toolkit/README.md

Shows how to use the `spring` utility function from `flip-toolkit` for orchestrating animations independent of the FLIP technique. It allows defining animation values, handling updates, and specifying callbacks for completion.

```js
import { spring } from "flip-toolkit";

const container = document.querySelector(".container");
const squares = [...container.querySelectorAll(".square")];

squares.forEach((el, i) => {
  spring({
    config: "wobbly",
    values: {
      translateY: [-15, 0],
      opacity: [0, 1]
    },
    onUpdate: ({ translateY, opacity }) => {
      el.style.opacity = opacity;
      el.style.transform = `translateY(${translateY}px)`;
    },
    delay: i * 25,
    onComplete: () => {
      // add callback logic here if necessary
    }
  });
});
```

--------------------------------

### Route-based Animations with React Router

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Shows how to integrate react-flip-toolkit with React Router for route-driven transitions. A Flipper component is used, with its `flipKey` prop updated based on the current location pathname and search parameters to trigger animations when routes change.

```jsx
<Route
  render={({ location, search }) => {
    return (
      <Flipper
        flipKey={`${location.pathname}-${location.search}`}
      >
      {/* Child routes that contain Flipped components go here...*/}
      </Flipper>
    )
  }}
/>
```

--------------------------------

### Vanilla CSS Styles for React Flip Toolkit

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/packages/flip-toolkit/test/index.html

This snippet contains core CSS styles used for layout and visual presentation. It defines styles for boxes, containers, list items, and their inner elements, including flexbox properties and color schemes. These styles are foundational for components that might utilize the React Flip Toolkit for animations.

```css
.box { width: 2rem; height: 2rem; background-color: orange; }
.big-box { width: 100vw; height: 100vh; }
.container-2 { display: flex; font-size: 2rem; list-style: none; }
.container-2 li { border: 2px solid slateblue; height: 6rem; width: 6rem; background-color: wheat; }
.container-2 li .inner { background-color: slateblue; width: 1rem; height: 1rem; }
.container-2 li .inverted > div { display: flex; justify-content: center; align-items: center; height: 100%; }
.reversed { flex-direction: row-reverse; }
.container-2.reversed li { width: 8rem; height: 8rem; }
.container-2.reversed .inner { width: 4rem; height: 4rem; }
```

--------------------------------

### React Flip Toolkit: Stagger Effects Configuration

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Shows how to implement stagger effects for list items using the `stagger` prop on the Flipped component. This allows for sequenced animations, creating a more dynamic visual experience for list updates. The effect is applied to individual animated list items.

```jsx
<Flipped flipId={`element-${i}`} stagger>
  <AnimatedListItem/>
</Flipped>
```

--------------------------------

### react-flip-toolkit Callback Props

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

This section details the various callback props available in react-flip-toolkit for controlling element animations. These callbacks allow developers to hook into different stages of the FLIP animation lifecycle, such as element appearance, exit, and animation progress, providing fine-grained control over transitions.

```APIDOC
Callback Props for react-flip-toolkit:

- onAppear(element, index, decisionData)
  - Called when an element first appears in the DOM.
  - Arguments:
    - element: Reference to the DOM element being transitioned.
    - index: The index of the element relative to all appearing elements.
    - decisionData: An object containing `{previous: decisionData, current: decisionData}`.
  - Details: If provided, the default opacity is set to 0, allowing custom fade-in animations. Set opacity to 1 immediately if no animation is desired.
  - Example: Used for fade-in animations.

- onExit(element, index, removeElement, decisionData)
  - Called when an element is removed from the DOM.
  - Arguments:
    - element: Reference to the DOM element being transitioned.
    - index: The index of the element relative to all exiting elements.
    - removeElement: A function that must be called when the exit transition is complete.
    - decisionData: An object containing `{previous: decisionData, current: decisionData}`.
  - Details: The `removeElement` function must be invoked to signal the completion of the exit transition.
  - Example: Used for fade-out animations.

- onStart(element, decisionData)
  - Called when the FLIP animation for an element begins.
  - Arguments:
    - element: Reference to the DOM element being transitioned.
    - decisionData: An object containing `{previous: decisionData, current: decisionData}`.

- onStartImmediate(element, decisionData)
  - Similar to `onStart`, but guaranteed to run on the initial tick of the FLIP animation before the next frame renders, even with stagger delays.
  - Arguments:
    - element: Reference to the DOM element being transitioned.
    - decisionData: An object containing `{previous: decisionData, current: decisionData}`.

- onSpringUpdate(springValue)
  - Called with the current spring value during the animation (typically between 0 and 1, but may briefly exceed these bounds).
  - Arguments:
    - springValue: The current value of the spring.
  - Details: Useful for tweening other non-FLIP animations in sync with the FLIP transition.

- onComplete(element, decisionData)
  - Called when the FLIP animation for an element finishes.
  - Arguments:
    - element: Reference to the DOM element being transitioned.
    - decisionData: An object containing `{previous: decisionData, current: decisionData}`.
  - Details: This callback is still invoked if transitions are interrupted by new ones.
```

--------------------------------

### Flipper Component API

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

The Flipper component acts as a container for animated elements. It requires a `flipKey` prop that should change when animations are intended to occur, triggering the FLIP animation sequence.

```APIDOC
Flipper
  Props:
    flipKey: any
      Description: A unique key that, when changed, triggers a new FLIP animation cycle.
      Required: Yes

    decisionMaker: (element: HTMLElement, index: number, list: HTMLElement[]) => string
      Description: A function to determine the flipId for elements within the Flipper.
      Default: (element, index, list) => element.dataset.flipId || String(index)

    springConfig: object
      Description: Configuration object for the animation springs (e.g., stiffness, damping).
      Example: { stiffness: 170, damping: 26 }

    staggerConfig: object
      Description: Configuration for stagger effects, controlling delay and duration.
      Example: { delay: 100, duration: 300 }

    absolute: boolean
      Description: If true, positions children absolutely within the Flipper.
      Default: false

    portalHostId: string
      Description: ID of the DOM element to portal animations to, useful for overflow issues.

    debug: boolean
      Description: Enables debug logs for animation events.
```

--------------------------------

### CSS Variable Browser Compatibility Check

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/packages/react-flip-toolkit/demo/GuitarsExample/index.html

This JavaScript code checks if the current browser supports CSS Variables. It dynamically creates a style element to test the 'font-weight' property with a CSS variable. If support is not detected, it alerts the user.

```javascript
document.documentElement.className="js";
var supportsCssVars=function(){
  var e,t=document.createElement("style");
  t.innerHTML="root: { --tmp-var: bold; }";
  document.head.appendChild(t);
  e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)"));
  t.parentNode.removeChild(t);
  return e
};

supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
```

--------------------------------

### handleEnterUpdateDelete Prop

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Provides custom control over the sequence of transitions (enter, update, delete). By default, exiting elements animate out before entering elements. This prop allows simultaneous transitions or custom ordering.

```javascript
handleEnterUpdateDelete: function
  - By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions &mdash; say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs:
  - hideEnteringElements: this func applies an opacity of 0 to entering elements so they can be faded in - it should be called immediately
  - animateEnteringElements: calls `onAppear` for all entering elements
  - animateExitingElements: calls `onExit` for all exiting elements, returns a promise that resolves when all elements have exited
  - animateFlippedElements: the main event: `FLIP` animations for updating elements, this also returns a promise that resolves when animations have completed
```

--------------------------------

### CSS Variable Browser Compatibility Check

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/packages/react-flip-toolkit/demo/GuitarsExample/200.html

This JavaScript code checks if the current browser supports CSS Variables. It dynamically creates a style element to test the 'font-weight' property with a CSS variable. If support is not detected, it alerts the user.

```javascript
document.documentElement.className="js";
var supportsCssVars=function(){
  var e,t=document.createElement("style");
  t.innerHTML="root: { --tmp-var: bold; }";
  document.head.appendChild(t);
  e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)"));
  t.parentNode.removeChild(t);
  return e
};

supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
```

--------------------------------

### Flipped Component API

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

The Flipped component wraps individual elements that should be animated. It uses the `flipId` prop to track elements across renders and animate their position, scale, and opacity changes.

```APIDOC
Flipped
  Props:
    flipId: string | number
      Description: A unique identifier for the element, used to match elements across renders.
      Required: Yes

    children: ReactNode
      Description: The content or component to be wrapped and animated.

    // Basic Props
    opacity: number
      Description: Sets the initial opacity for the element.
    scale: number
      Description: Sets the initial scale for the element.
    translateY: number
      Description: Sets the initial vertical translation for the element.
    translateX: number
      Description: Sets the initial horizontal translation for the element.

    // Callback Props
    onAppear: (element: HTMLElement, animate: (options: object) => void) => void
      Description: Callback function executed when the element appears.
    onEnter: (element: HTMLElement, animate: (options: object) => void) => void
      Description: Callback function executed when the element enters the animation.
    onUpdate: (element: HTMLElement, animate: (options: object) => void) => void
      Description: Callback function executed when the element's position/size updates.
    onExit: (element: HTMLElement, animate: (options: object) => void) => void
      Description: Callback function executed when the element exits the animation.
    onComplete: (element: HTMLElement) => void
      Description: Callback function executed when the element's animation completes.

    // Transform Props
    transformOrigin: string
      Description: Sets the origin for scale and rotate transformations.
      Example: 'center center'

    // Advanced Props
    staggerDelay: number
      Description: Custom stagger delay for this specific element.
    staggerDuration: number
      Description: Custom stagger duration for this specific element.
    springConfig: object
      Description: Custom spring configuration for this element.
    absolute: boolean
      Description: Positions the element absolutely within its parent Flipper.
    invisible: boolean
      Description: Makes the element invisible but still part of the FLIP calculation.
    getTranslateX: (element: HTMLElement) => number
      Description: Function to calculate custom translateX.
    getTranslateY: (element: HTMLElement) => number
      Description: Function to calculate custom translateY.
    getScale: (element: HTMLElement) => number
      Description: Function to calculate custom scale.
    getOpacity: (element: HTMLElement) => number
      Description: Function to calculate custom opacity.
```

--------------------------------

### Visible Block Styling

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/packages/flip-toolkit/mocha/testrunner.html

CSS rules defining the appearance and transformations of visible blocks used in DOM tests for react-flip-toolkit.

```css
.visible-block { background: blueviolet; width: 15px; height: 15px; } .visible-block:nth-of-type(2) { background: blue; } .visible-block:nth-of-type(3) { background: red; } .has-transform { transform: translate(50px, 25px) scale(2); }
```

--------------------------------

### Flipped Component Props

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

This section details the various props available for the Flipped component in react-flip-toolkit. These props control how elements are identified, animated, and styled during FLIP animations, including managing parent transforms, spring physics, and staggering effects.

```APIDOC
Flipped Component Props:

children: node or function (required)
  - Wraps a single element, React component, or render prop child with the Flipped component.

flipId: string (required unless inverseFlipId is provided)
  - Used to match elements across renders for animation. This is how react-flip-toolkit knows which elements should be animated together.

inverseFlipId: string
  - Refers to the id of a parent Flipped container whose transform you want to cancel out. When provided, the Flipped component becomes a limited version responsible only for cancelling its parent's transform, ignoring other props except inverseFlipId. See documentation on canceling parent transforms for more details.

transformOrigin: string (default: "0 0")
  - A convenience prop to apply the CSS transform-origin property to the FLIPped element. Overrides react-flip-toolkit's default transform-origin: 0 0; if provided.

spring: string or object (default: "noWobble")
  - Specifies the spring animation preset. Options include "noWobble", "veryGentle", "gentle", "wobbly", or "stiff". Alternatively, an object with stiffness and damping parameters can be provided. Explore spring setting options for more details.

stagger: boolean or string (default: false)
  - Provides a spring-based staggering effect where each item's easing is pinned to the previous one's movement. Set to true to stagger with all other staggered elements. A string key can be provided for granular staggering with elements sharing the same key.

delayUntil: string (flipId) (default: false)
  - Delays an animation by referencing another Flipped component's flipId that it should wait for before animating. This prop is necessary only when using the stagger prop for specific use cases.
```

--------------------------------

### Flipper Component Usage

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

The Flipper component serves as the parent wrapper for all elements intended for animation within a specific transition region. It manages the FLIP animation state for its children. Multiple Flipper instances can be used on a page for different animation contexts.

```jsx
<Flipper flipKey={someKeyThatChanges}>{/* children */}</Flipper>
```

--------------------------------

### Global Flip Configuration

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Provides functions to globally control FLIP animations. 'disableFlip()' turns off all animations, 'enableFlip()' reactivates them, and 'isFlipEnabled()' checks the current global state.

```javascript
// Disable all animations globally
disableFlip();

// Re-enable all animations globally
enableFlip();

// Check if animations are currently enabled
const isEnabled = isFlipEnabled();
```

--------------------------------

### Flipped Component Usage

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Wraps an element to be animated by react-flip-toolkit. It passes down necessary props to its child for animation. The Flipped component itself produces no markup.

```jsx
Flipped: Component
  - Wraps an element that should be animated.
  - E.g. in one component you can have
    <Flipped flipId="coolDiv">
      <div className="small" />
    </Flipped>
  - and in another component somewhere else you can have
    <Flipped flipId="coolDiv">
      <div className="big" />
    </Flipped>
  - and they will be tweened by `react-flip-toolkit`.
  - The `Flipped` component produces no markup, it simply passes some props down to its wrapped child.
```

```jsx
Wrapping a React Component:
  - If you want to wrap a React component rather than a JSX element like a `div`, you can provide a render prop and then apply the `flippedProps` directly to the wrapped element in your component:
    <Flipped>
      {flippedProps => <MyCoolComponent flippedProps={flippedProps} />}
    </Flipped>

    const MyCoolComponent = ({ flippedProps }) => <div {...flippedProps} />
  - You can also simply provide a regular React component as long as that component spreads unrecognized props directly onto the wrapped element (this technique works well for wrapping styled components):
    <Flipped>
      <MyCoolComponent />
    </Flipped>

    const MyCoolComponent = ({ knownProp, ...rest }) => <div {...rest} />
```

--------------------------------

### CSS will-change for Performance

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Applies the `will-change: transform` CSS property to hint to the browser about anticipated transform changes, potentially improving animation performance. Use with caution as it can increase resource usage.

```css
.box {
  will-change: transform;
}
```

--------------------------------

### onComplete Callback

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

This callback prop is invoked when all individual FLIP animations have finished. It receives a list of flipIds for activated Flipped components. It is also called before an interrupted animation is terminated.

```javascript
onComplete: function
  - This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated.
```

--------------------------------

### Nested Scale Transforms with Flipped

Source: https://github.com/aholachek/react-flip-toolkit/blob/master/README.md

Demonstrates how to use nested Flipped components to prevent child elements from being warped by parent scale transforms. The `inverseFlipId` prop on the inner Flipped component counteracts the parent's transforms, and the `scale` prop can be used to limit this effect to only scale.

```jsx
<Flipped flipId={id}>
  <div>
    <Flipped inverseFlipId={id} scale>
      <div>some text that will not be warped</div>
    </Flipped>
  </div>
</Flipped>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.