# @ampa/nextjs

> ## Why?

Latest version **1.0.1** (published 2019-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ampa/nextjs
pnpm add @ampa/nextjs
yarn add @ampa/nextjs
bun add @ampa/nextjs
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-04-01 |
| First published | 2019-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 47.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | uncleseneca |
| Maintainers | uncleseneca |

## Links

- npm: https://www.npmjs.com/package/@ampa/nextjs
- Repository: https://github.com/Uncleseneca/ampa
- Homepage: https://github.com/Uncleseneca/ampa#readme
- Issues: https://github.com/Uncleseneca/ampa/issues
- npm.io page: https://npm.io/package/@ampa/nextjs

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [path-to-regexp](https://npm.io/package/path-to-regexp.md) ^3.0.0
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^2.5.3

## Recent versions

- 1.0.1 (latest) — 2019-04-01

## README

# @ampa/nextjs

## Why?

To create page transitions with nextjs router without pain

Allows to create route-based animations (different animations for different route combinations)

## Install

```sh
yarn add @ampa/nextjs
```

## Usage

To start annimating pages you need to do 2 things (there is an example below):

- make animations config with CSS transitions
- wrap your page component with `<Ampa />`

## Example:

### 1) config

We use express-like routes and classNames list from react-transition group

```
const routeAnimations = [
  {
    prevRoute: '/home',
    nextRoute: '/career/:id',
    styles: {
      enter: 'my-enter',
      enterActive: 'my-active-enter',
      exit: 'my-exit',
      exitActive: 'my-active-exit',
    },
  },

  // or if you're using CSS-modules you can import whole CSS file, where classes named like 'enter', 'enterActive' etc
  {
    prevRoute: '/about',
    nextRoute: '/home',
    styles: backwardsCSSfile,
  },
]
```

### 2) `<Ampa />`

```
import { Ampa } from '@ampa/nextjs' // the core component
...
  <Ampa
    timeout={{ enter: 500, exit: 500 }}
    routeAnimations={routeAnimations}
  >
    <Component {...pageProps} />
  </PageTransition>
```

## Example

Available in [example](./example)

## Requirements

### React 16 and higher

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