# presentation-slides

> React Slideshow Component. Helper for creating presentation like Powerpoint. Change the slides with keyboard keys.

Latest version **0.1.1** (published 2017-09-14) · 0 weekly downloads

## Install

```sh
npm install presentation-slides
pnpm add presentation-slides
yarn add presentation-slides
bun add presentation-slides
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2017-09-14 |
| First published | 2017-09-13 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 37 |
| Known vulnerabilities | 0 (+9 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | fabioavelino |

## Links

- npm: https://www.npmjs.com/package/presentation-slides
- npm.io page: https://npm.io/package/presentation-slides

## Dependencies (37)

- [jest](https://npm.io/package/jest.md) 20.0.4
- [chalk](https://npm.io/package/chalk.md) 1.1.3
- [react](https://npm.io/package/react.md) ^15.6.1
- [dotenv](https://npm.io/package/dotenv.md) 4.0.0
- [eslint](https://npm.io/package/eslint.md) 4.4.1
- [promise](https://npm.io/package/promise.md) 8.0.1
- [webpack](https://npm.io/package/webpack.md) 3.5.1
- [fs-extra](https://npm.io/package/fs-extra.md) 3.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1
- [babel-core](https://npm.io/package/babel-core.md) 6.25.0
- [babel-jest](https://npm.io/package/babel-jest.md) 20.0.3
- [css-loader](https://npm.io/package/css-loader.md) 0.28.4
- [url-loader](https://npm.io/package/url-loader.md) 0.5.9
- [file-loader](https://npm.io/package/file-loader.md) 0.11.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) 7.1.2
- [babel-eslint](https://npm.io/package/babel-eslint.md) 7.2.3
- [babel-loader](https://npm.io/package/babel-loader.md) 7.1.1
- [style-loader](https://npm.io/package/style-loader.md) 0.18.2
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) 2.0.3
- [babel-runtime](https://npm.io/package/babel-runtime.md) 6.26.0
- [eslint-loader](https://npm.io/package/eslint-loader.md) 1.9.0
- [object-assign](https://npm.io/package/object-assign.md) 4.1.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) 2.0.6
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^4.0.1
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 2.7.1
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 7.1.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 2.29.0
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) 2.7.0
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^3.0.2
- [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) 2.35.0
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) 5.1.1
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) 3.2.0
- [eslint-config-react-app](https://npm.io/package/eslint-config-react-app.md) ^2.0.0
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) 1.2.1
- [sw-precache-webpack-plugin](https://npm.io/package/sw-precache-webpack-plugin.md) 0.11.4
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) 3.0.0
- [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) 2.1.1

## Recent versions

- 0.1.1 (latest) — 2017-09-14
- 0.1.0 — 2017-09-13

## README

# [presentation-slides](https://github.com/fabioavelino/presentation-slides/)
React Slideshow Component.
Helper for creating presentation like Powerpoint. Change the slides with keyboard keys.

### Installation

```bash
npm install presentation-slides
```

### Example

```js
import React, { Component } from 'react';
import Slider from 'presentation-slides';

class Slideshow extends Component {
  render () {
    return (
      <Slider>
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
      </Slider>
    );
  }
}
```
### Props

|    Property    |  Type  |               Description                |       Default       |
| -------------  | ------ |          ----------------------          | ------------------- |
| prefix         | string | Prefix added to the slide div            | 'slide-'            |
| prev_keys      | array  | Keyboard keys for showing previous slide | ['p', 'ArrowLeft']  |
| next_keys      | array  | Keyboard keys for showing next slide     | ['n', 'ArrowRight'] |

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