# react-page-animation
> Customisable Page Animations with react-router
Latest version **1.0.3** (published 2020-05-04) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-page-animation
pnpm add react-page-animation
yarn add react-page-animation
bun add react-page-animation
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-05-04 |
| First published | 2020-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 69.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Lutetium-Vanadium |
| Maintainers | lutetium-vanadium |
## Links
- npm: https://www.npmjs.com/package/react-page-animation
- Repository: https://github.com/Lutetium-Vanadium/react-page-animation
- npm.io page: https://npm.io/package/react-page-animation
## Dependencies (4)
- [typescript](https://npm.io/package/typescript.md) ^3.8.3
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.25
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.5
- [@types/react-router-dom](https://npm.io/package/@types/react-router-dom.md) ^5.1.3
## Recent versions
- 1.0.3 (latest) — 2020-05-04
- 1.0.2 — 2020-05-03
- 1.0.1 — 2020-03-24
- 1.0.0 — 2020-03-24
## README
# PageAnimation
## Index
- [Example](#example)
- [CSS Classes](#css-classes)
It is a very basic animation wrapper that has a very specific use case.
It allows you to have different routes within react-router places as if in a grid and provide customized transitions based
on the direction.
There is only one `export default` which is the `PageAnimation` Componant
## PageAnimation Props
| Name | Type | Default | Purpose |
| ---------------- | -------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `animate` | `boolean` | `true` | Whether to animate the between screens or directly jump to next screen. (note: this is added for an easy toggle) |
| `bias` | "vertical" \| "horizontal" | "vertical" | Since currently only the 4 cardinal directions are supported, if the relative direction is at non 90 degree angle, the bias resolves which one to use |
| `children` | `any` | _Required_ | The regular React children which gets rendered on each page |
| `classExtension` | `string` | _Required_ | The base className from which all the directions extend |
| `className` | `string` | `null` | The `className` to be applied on the wrapper div which holds all the rendered screens |
| `grid` | `RegExp[][]` | _Required_ | This is the grid of pages which is matched against location path from which realtive direcctions are found |
| `timeout` | `number` | _Required_ | The time delay after which previous screen will be unmounted |
> ### `bias`:
>
> As noted before, currently diagnol directions arent supported, bias controls whether to check for up/down first or left/right.
> eg: If the page is to the `top-left`, if bias is "vertical", the direction `top` will be given. If the bias was "horizontal", left would be given
# Example
Taking this example setup
```tsx
```
The basic page layout then is -
| Home [/] |
About [/about] |
| Products [/products] |
If a user is at `/` and then clicks to go to `/product`, then the css class which is added is
- for `/` screen: `direction-down-leave`
- for `/products` screen: `direction-down-enter`
> After 500 milliseconds, `/` screen will be unmounted and `/products` will have the class `direction-done`
Similarily, if a user is at `/products` and clicks to go to `/about`, then the css class which is added is
- for `/products` screen: `direction-top-leave`
- for `/abourt` screen: `direction-top-enter`
> After 500 milliseconds, `/products` screen will be unmounted and `/about` will have the class `direction-done`
# CSS Classes
In general the classes are generated in the following format:
"`classExtension`-`direction`-`timePosition`" _where `classExtension` is supplied as a prop, `direction` is the relative direction between 2 screens, and the `timePostion` is position of the animation in the lifecycle of the component_
> eg. pages-left-done
> `pages` The name supplied to the Transition component
> `left` The current component was to the left of the previous component
> `done` The previous component has been unmounted and backward means behind in the url tree
## classExension
The prop supplied by you.
## direction
There are six directions - `top`, `bottom`, `left` and `right` which are the relative postions in the grid.
If the same grid location is detected, depending on the relative depth of the url, `same-backward`, `same-forward` and `same` are set as the direction.
> eg: Both the urls are matched to the same position on the grid path.
> If the previous url is `/users` and the next url is `/users/232`, then the same-forward animation will be triggered
## timePosition
There are three 'timePositions' - `enter`, `done`, `leave`.
- `enter` - When the component, as well as the previous component, are mounted.
- `done` - When the previous component is unmounted.
- `leave`- When this component is going to be unmounted. _[Note: this correlated to the next components `enter` timePosition]_
---
_Source: https://npm.io/package/react-page-animation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._