# @gentlemen/lottie-button

> Lottie Button Component with React, Typescript

Latest version **0.1.3** (published 2019-08-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install @gentlemen/lottie-button
pnpm add @gentlemen/lottie-button
yarn add @gentlemen/lottie-button
bun add @gentlemen/lottie-button
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2019-08-02 |
| First published | 2019-06-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 19.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | dalgos |
| Maintainers | dalgos, koronya |

## Links

- npm: https://www.npmjs.com/package/@gentlemen/lottie-button
- Repository: https://github.com/dalgos/gentlemen-components
- Homepage: https://github.com/dalgos/gentlemen-components/tree/master/packages/lottie-button#readme
- Issues: https://github.com/dalgos/gentlemen-components/issues
- npm.io page: https://npm.io/package/@gentlemen/lottie-button

## Dependencies (3)

- [in-publish](https://npm.io/package/in-publish.md) ^2.0.0
- [react-lottie](https://npm.io/package/react-lottie.md) ^1.2.3
- [@types/react-lottie](https://npm.io/package/@types/react-lottie.md) ^1.2.2

## Recent versions

- 0.1.3 (latest) — 2019-08-02
- 0.1.2 — 2019-06-19
- 0.1.1 — 2019-06-19
- 0.1.0 — 2019-06-19

## README

# `lottie-button`

> TODO: description

## Usage

```jsx
import LottieButton from '@gentlemen/lottie-button';

import openAniData from 'assets/open.json'; // lottie json data
import closeAniData from 'assets/close.json'; // lottie json data

const AniButton = () => (
  <LottieButton
    // 재생 제어
    isPlayed={false}
    // 순방향 애니메이션 데이터 json
    playAniData={openAniData}
    // 역방향 애니메이션 데이터 json
    reverseAniData={closeAniData}
    // 애니메이션 영역의 넓이
    width={24}
    // 애니메이션 영역의 높이
    height={24}
    // react-lottie 옵션
    options={{
      animationData: openAniData,
      autoplay: false,
      loop: false,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
      },
    }}
    isStopped={true}
    isClickToPauseDisabled={true}
  />
)

```

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