# motion-box

> A super simple abstraction of Chakra UI's `Box` component, enhanced with Framer Motion props from the `motion` API.

Latest version **1.6.0** (published 2021-08-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install motion-box
pnpm add motion-box
yarn add motion-box
bun add motion-box
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2021-08-27 |
| First published | 2021-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 18.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tundera |
| Maintainers | tundera |

## Links

- npm: https://www.npmjs.com/package/motion-box
- npm.io page: https://npm.io/package/motion-box

## Recent versions

- 1.6.0 (latest) — 2021-08-27
- 1.5.0 — 2021-06-06
- 1.4.0 — 2021-06-03
- 1.3.0 — 2021-05-05
- 1.2.0 — 2021-04-24
- 1.1.0 — 2021-04-15
- 1.0.1 — 2021-04-12
- 1.0.0 — 2021-04-12
- 0.1.1 — 2021-04-12

## README

# `motion-box`

A super simple abstraction of Chakra UI's `Box` component, enhanced with Framer Motion props from the `motion` API.

## Install

> This packages requires Chakra UI and its peer dependencies. If you haven't installed Chakra UI in your project, find the necessary pacakges [here](https://chakra-ui.com/docs/getting-started#installation).

Using npm:

```node
npm install motion-box
```

Using yarn:

```node
yarn add motion-box
```

## Usage

```tsx
import MotionBox from 'motion-box';

function Example() {
  return (
    <MotionBox
      height="40px"
      bg="red.300"
      drag="x"
      dragConstraints={{ left: -100, right: 100 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    />
  );
}
```

## Demo

See a working demo using `motion-box` [here](https://motion-box.vercel.app)

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