# react-3d-rect

> > 3D Rectangle with transition

Latest version **1.0.8** (published 2021-03-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-3d-rect
pnpm add react-3d-rect
yarn add react-3d-rect
bun add react-3d-rect
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2021-03-13 |
| First published | 2021-03-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Yunseo Hwang |
| Maintainers | hseoy |
| Keywords | react, 3d, rect, transition, animation, cube |

## Links

- npm: https://www.npmjs.com/package/react-3d-rect
- Repository: https://github.com/hseoy/react-3d-rect
- Homepage: https://hseoy.github.io/react-3d-rect/
- Issues: https://github.com/hseoy/react-3d-rect/issues
- npm.io page: https://npm.io/package/react-3d-rect

## Dependencies (9)

- [react](https://npm.io/package/react.md) ^17.0.1
- [install](https://npm.io/package/install.md) ^0.13.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.1
- [styled-components](https://npm.io/package/styled-components.md) ^5.2.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.2.3
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.9
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.6.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2021-03-13
- 1.0.7 — 2021-03-12
- 1.0.6 — 2021-03-12
- 1.0.5 — 2021-03-12

## README

# react-3d-rect

> 3D Rectangle with transition

- [Demo](https://hseoy.github.io/react-3d-rect/)

![Demo](./img/demo.gif)

## Table of Content

1. [Install](#install)
2. [Usage](#usage)
3. [Main Props](#main-props)
4. [To run an example](#to-run-an-example)
5. [License](#license)

## Install

```
$ npm install --save react-3d-rect
```

## Usage

The library consists of a single component. Rect components can have four children and can ignore more than four children. You can control the index, transition-duration, etc. of Rect using props.

```jsx
import Rect from 'react-3d-rect';

// ...

<Rect index={'front'} transition={0.5}>
  <div>FRONT</div>
  <div>RIGHT</div>
  <div>BACK</div>
  <div>LEFT</div>
</Rect>;

// ...
```

### Main Props

| Attributes   |   Type   | Default | Description                                                             |
| :----------- | :------: | :-----: | :---------------------------------------------------------------------- |
| index        | `string` | `front` | Sets the current rect side. Possible values: `front, right, back, left` |
| size         | `number` |  `500`  | Width(px) of Rect. Height of Rect is `100%`                             |
| transition   | `number` |   `1`   | Duration of transition                                                  |
| emptyBgColor | `string` | `#fff`  | Background color of empty face of Rect                                  |
| emptyBdColor | `string` | `#000`  | Border color of empty face of Rect                                      |

### To run an example:

```
$ git clone https://github.com/hseoy/react-3d-rect
$ npm install
$ npm start
```

## License

MIT © [hseoy](https://github.com/hseoy)

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