# @teste-ui/transition

> Common transition components for Chakra UI

Latest version **2.0.4** (published 2022-07-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @teste-ui/transition
pnpm add @teste-ui/transition
yarn add @teste-ui/transition
bun add @teste-ui/transition
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2022-07-14 |
| First published | 2022-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 98.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Segun Adebayo |
| Maintainers | benits |
| Keywords | transition, animation, react, react transition group, motion, chakra ui |

## Links

- npm: https://www.npmjs.com/package/@teste-ui/transition
- Repository: https://github.com/teste-ui/teste-ui
- Homepage: https://github.com/teste-ui/teste-ui#readme
- Issues: https://github.com/teste-ui/teste-ui/issues
- npm.io page: https://npm.io/package/@teste-ui/transition

## Dependencies (1)

- [@teste-ui/utils](https://npm.io/package/@teste-ui/utils.md) 2.0.4

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 2.0.4 (latest) — 2022-07-14
- 2.0.3 — 2022-07-13

## README

# @teste-ui/transition

## Installation

```sh
yarn add @teste-ui/transition
# or
npm i @teste-ui/transition
```

## Collapse

The Collapse component is used to create regions of content that can
expand/collapse with a simple animation. It helps to hide content that's not
immediately relevant to the user.

## Import component

```jsx
import { Collapse } from "@teste-ui/transition"
```

## Usage

```jsx
function SampleSpring() {
  const { isOpen, onToggle } = useDisclosure()
  return (
    <>
      <Button onClick={onToggle}>Click</Button>
      <Collapse isOpen={isOpen}>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
        labore wes anderson cred nesciunt sapiente ea proident.
      </Collapse>
    </>
  )
}
```

## Changing the starting height

```jsx
function Example() {
  const [show, setShow] = React.useState(false)

  const handleToggle = () => setShow(!show)

  return (
    <>
      <Collapse startingHeight={20} isOpen={show}>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
        labore wes anderson cred nesciunt sapiente ea proident.
      </Collapse>
      <Button size="sm" onClick={handleToggle} mt="1rem">
        Show {show ? "Less" : "More"}
      </Button>
    </>
  )
}
```

// TODO: Explain the `framer-motion` part and how to customize the motion
variants

---
_Source: https://npm.io/package/@teste-ui/transition · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._