https://github.com/marcjazz/slide-deck
A lightweight, optimized slide presentation library
https://github.com/marcjazz/slide-deck
markdown presentation presentation-slides react revealjs slides
Last synced: 4 months ago
JSON representation
A lightweight, optimized slide presentation library
- Host: GitHub
- URL: https://github.com/marcjazz/slide-deck
- Owner: Marcjazz
- Created: 2025-02-24T00:47:11.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2025-02-26T06:03:44.000Z (4 months ago)
- Last Synced: 2025-02-26T07:18:51.590Z (4 months ago)
- Topics: markdown, presentation, presentation-slides, react, revealjs, slides
- Language: TypeScript
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Light Slide Deck
## Overview
Slide Deck is a lightweight, optimized slide presentation library designed for limited internet access environments. It provides a simple Markdown-based slide system with horizontal and vertical navigation, similar to Reveal.js but with minimal dependencies.
## Features
- **Markdown Support**: Write slides using Markdown for easy content formatting.
- **Horizontal & Vertical Navigation**: Navigate slides using arrow keys or navigation buttons.
- **Keyboard Shortcuts**: Move through slides with `ArrowUp`, `ArrowDown`, `ArrowLeft`, and `ArrowRight`.
- **Customizable Navigation**: Option to enable or disable navigation buttons.
- **Optimized for Performance**: Designed to be lightweight and fast for low-bandwidth environments.
## Installation
To install the package, run:
```sh
npm install @kuidjamarco/slide-deck
```
or using yarn:
```sh
yarn add @kuidjamarco/slide-deck
```
## Usage
Import and use the `SlideDeck` component in your React project:
```tsx
import React from 'react';
import SlideDeck from '@kuidjamarco/slide-deck';
import 'tailwindcss/tailwind.css'
const slides = [
['# Welcome to Light Slide Deck'],
['## Slide 1', 'Some content here'],
['## Slide 2', 'More details'],
];
const App = () => {
return ;
};
export default App;
```
## Props
| Prop Name | Type | Default | Description |
|--------------|-------------|---------|-------------------------------------------------|
| `slides` | `string[][]` | `[]` | Array of slides, each containing Markdown content. |
## Keyboard Shortcuts
- **Left Arrow (◀︎)**: Previous horizontal slide
- **Right Arrow (▶︎)**: Next horizontal slide
- **Up Arrow (▲)**: Previous vertical slide
- **Down Arrow (▼)**: Next vertical slide
## License
MIT License. See `LICENSE` for details.