https://github.com/zhangyu1818/use-flip

Effortless FLIP animations with a React Hook for smoother transitions.
https://github.com/zhangyu1818/use-flip

animation flip react react-hooks

Last synced: 23 days ago
JSON representation

Effortless FLIP animations with a React Hook for smoother transitions.

• Host: GitHub
• URL: https://github.com/zhangyu1818/use-flip
• Owner: zhangyu1818
• License: mit
• Created: 2024-04-03T15:40:30.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-08T02:35:01.000Z (9 months ago)
• Last Synced: 2024-11-13T06:20:54.372Z (about 1 month ago)
• Topics: animation, flip, react, react-hooks
• Language: TypeScript
• Homepage:
• Size: 6.84 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-flip

A zero-dependency React hook for executing FLIP (First, Last, Invert, Play) animations within your React applications. It offers a seamless and efficient method for animating changes in the positions and dimensions of elements.

## Installation

```bash

pnpm install use-flip

```

## Usage

Here's a basic example to get you started:

[![Edit use-flip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/use-flip-hpmjxz)

```jsx

import React, { useState } from 'react'

import { useFlip } from 'use-flip'

function ExpandableComponent() {

  const [expanded, setExpanded] = useState(false)

  const flipRef = useFlip([expanded], {

    duration: 300,

    easing: 'ease-in-out',

    dimensions: 'height',

  })

  return (

    


       setExpanded(!expanded)}>{expanded ? 'Collapse' : 'Expand'}

      


        {expanded && (

          


            More content here. When expanding or collapsing, this content will animate smoothly, demonstrating the FLIP

            animation.

          

        )}

      

    

  )

}

```


## API

### `useFlip(deps, options)`

#### Parameters

- `deps: unknown[]` - An array of dependencies that will trigger the animation when changed.

- `options: FlipOptions` - An optional configuration object for the animation.

#### Options

- `dimensions?: 'width' | 'height' | true` - Specifies whether to animate width and/or height. If set to `true`, both width and height are animated.

- `duration?: number` - The duration of the animation, in milliseconds. The default is `300`.

- `easing?: string` - The CSS easing function for the animation. The default is `'ease'`.

- `fill?: FillMode` - The fill mode of the animation, determining the styling of the element before and after the animation. The default is `'auto'`.

## Contributing

Contributions are always welcome!

## License

[MIT](LICENSE)