{"id":15626090,"url":"https://github.com/bvaughn/react-presents","last_synced_at":"2025-04-04T13:06:18.371Z","repository":{"id":55857355,"uuid":"71676611","full_name":"bvaughn/react-presents","owner":"bvaughn","description":"React slideshow framework","archived":false,"fork":false,"pushed_at":"2020-12-11T03:29:53.000Z","size":7270,"stargazers_count":506,"open_issues_count":8,"forks_count":32,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-28T12:07:01.002Z","etag":null,"topics":["conference","powerpoint","presentation","react","slide","slideshow"],"latest_commit_sha":null,"homepage":"https://bvaughn.github.io/react-presents/","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bvaughn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-23T02:11:36.000Z","updated_at":"2025-03-02T13:34:30.000Z","dependencies_parsed_at":"2022-08-15T07:51:21.763Z","dependency_job_id":null,"html_url":"https://github.com/bvaughn/react-presents","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-presents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-presents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-presents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-presents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bvaughn","download_url":"https://codeload.github.com/bvaughn/react-presents/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247182353,"owners_count":20897379,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["conference","powerpoint","presentation","react","slide","slideshow"],"created_at":"2024-10-03T10:10:15.189Z","updated_at":"2025-04-04T13:06:18.347Z","avatar_url":"https://github.com/bvaughn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Getting started\n---------------\n\nInstall `react-presents` using npm.\n\n```shell\nnpm install react-presents --save\n```\n\nES6, CommonJS, and UMD builds are available with each distribution. For example:\n\n```js\n// Import the components you want like so:\nimport { Presentation, Slide } from 'react-presents'\n```\n\nAlternately you can load a global-friendly UMD build which exposes a global `ReactPresents` object:\n\n```html\n\u003cscript src=\"path/to/react-presents/dist/umd/react-presents.js\"\u003e\u003c/script\u003e\n```\n\nNow you're ready to start using the components.\n\nFor an example of a the kind of presentations that can be created with react-presents, check out my Connect Tech 2016 presentation on windowing with React: [bvaughn.github.io/connect-tech-2016](https://bvaughn.github.io/connect-tech-2016/).\n\nExample Usage\n---------\n\n### Creating a Slide\nPresentation slides are simple to create. You can use `TitleSlide` and `ContentSlide` with some predefined styles, or simply create a slide with custom layout by wrapping its content in `div` with 100% height and width. Below is a couple of example slides:\n```jsx\n/* SomeSlide.js */\nimport React from 'react'\nimport { ContentSlide, Step } from 'react-presents'\n\nexport default () =\u003e (\n  \u003cContentSlide\u003e\n    \u003ch1\u003eA simple slide\u003c/h1\u003e\n    \u003cp\u003eSlides can contain multiple steps.\u003c/p\u003e\n    \u003cul\u003e\n      \u003cStep index={1} exact\u003e\u003cli\u003eSub-text can appear only for a specific step\u003c/li\u003e\u003c/Step\u003e\n      \u003cStep index={2}\u003e\u003cli\u003eOr it can be additive\u003c/li\u003e\u003c/Step\u003e\n      \u003cStep index={3}\u003e\u003cli\u003e(By default it is additive)\u003c/li\u003e\u003c/Step\u003e\n      \u003cStep index={4} maxIndex={5}\u003e\u003cli\u003eThey can also be shown for a range\u003c/li\u003e\u003c/Step\u003e\n    \u003c/ul\u003e\n  \u003c/ContentSlide\u003e\n)\n```\n\n### Automatically Loading Slides\nUsing a bundler like Webpack, you can auto-load slides using an approach like follows:\n\n#### Webpack 2\n```jsx\n/* Application.js */\nconst slides = require.context('./path/to/slides/', false, /\\.js$/)\n  .keys()\n  .map((filename) =\u003e filename.replace('./', './path/to/slides/'))\n  .map((path) =\u003e require(path).default)\n```\n\n#### Webpack 3\n```jsx\n/* Application.js */\nconst slides = []\nconst context = require.context('./path/to/slides/', false, /\\.js$/)\ncontext\n  .keys()\n  .forEach(key =\u003e slides.push(context(key).default))\n```\n\n### Creating a Nav Menu\nOnce you have an array of loaded slides, you can auto-populate the options for a nav menu using an approach like so:\n\n```jsx\n/* Application.js */\nconst options = slides\n  .map((slide, index) =\u003e ({\n    label: slide.title,\n    value: index\n  }))\n  .filter((option) =\u003e option.label)\n```\n\nNote that the above approach assumes that slides have a static `title` attribute, eg:\n\n```jsx\n/* SomeSlide.js */\nimport React from 'react'\nimport { ContentSlide } from 'react-presents'\n\nconst slide = () =\u003e (\n  \u003cContentSlide\u003e\n    \u003ch1\u003e{slide.title}\u003c/h1\u003e\n    {/* Your content goes here */}\n  \u003c/ContentSlide\u003e\n)\n\nslide.title = 'The first slide'\n\nexport default slide\n```\n\nAlso note that [react-select](https://github.com/JedWatson/react-select) is used beneath the hood so the `options` array you construct must be compatible with it.\n\n### Creating a presentation\nAssuming you have an array of slides and options for the drop-down nav, you can create a presentation like follows:\n```jsx\nimport React from 'react'\nimport { Presentation, Slide, DropDownNav } from 'react-presents'\n\nexport default () =\u003e (\n  \u003cPresentation\u003e\n    {slides.map((Component, index) =\u003e (\n      \u003cSlide\n        component={Component}\n        key={index}\n      /\u003e\n    )).concat(\n      \u003cDropDownNav\n        key='DropDownNav'\n        options={options}\n      /\u003e\n    )}\n  \u003c/Presentation\u003e\n)\n```\n\nA default theme is provided with react-presents. You can disable this theme by specifying the `disableTheme` property:\n```jsx\n\u003cPresentation disableTheme\u003e\n  {slides}\n\u003c/Presentation\u003e\n```\n\n#### Presenter mode\nTo include presenter mode, you could use `PresenterModePlugin` enabling you to move to presenter mode by pressing `p` or `P` as shown below:\n```jsx\n\u003cPresentation\u003e\n  \u003cPresenterModePlugin /\u003e\n  {slides}\n\u003c/Presentation\u003e\n```\n\nApi\n---------\n\n### Code\nSyntax highlighting powered by [react-codemirror](https://github.com/JedWatson/react-codemirror).\n\n| Property | Type | Required | Description |\n|:---|:---|:---:|:---|\n| className | string | | Optional CSS class name to attach to root code mirror node |\n| codeMirrorOptions | object | | Configuration obect to pass to CodeMirror |\n| dimLines | array | | Array of line-number ranges for lines that should be dimmed |\n| highlightLines | array | | Array of line-number ranges for lines that should be highlighted |\n| value | string | ✓ | String to highlight |\n\n### ContentSlide\nSlide container with basic formatting. Intended for slides with moderate amounts of content.\n\n| Property | Type | Required | Description |\n|:---|:---|:---:|:---|\n| children | node | | Any valid React node |\n\n### Presentation\nMain presentation component, a collection of slides.\n\n| Property | Type | Required | Description |\n|:---|:---|:---:|:---|\n| children | any | ✓ | Any React node (typically slides) |\n| disableTheme | bool | | Do not set default theme/styles |\n| router | any | | Specific [react-router](https://github.com/ReactTraining/react-router/) implementation to use; `HashRouter` is used by default |\n\n### Slide\nAn individual slide. Slides are automatically mapped to urls (based on their position within the larger collection of slides). Each slide must specify _either_ a React component _or_ a render callback.\n\n| Property | Type | Required | Description |\n|:---|:---|:---:|:---|\n| component | node | | Any valid React node |\n| render | function | | Function that returns a React element |\n\n### Step\nHelper component for deferring sections of a slide's content. This component allows a single slide to be broken down into multiple steps (eg bullet points).\n\n| Property | Type | Required | Description |\n|:---|:---|:---:|:---|\n| children | node | ✓ | Any valid React node |\n| exact | bool | ✓ | Only show content when the slide's current step index is exactly the `index` specified |\n| index | number | | Don't show child content until the current step index is at least equal to this |\n| maxIndex | number | | Don't show child content if the current step index exceeds this |\n\n### TitleSlide\nSlide container with basic formatting. Intended for sparse content, title slides.\n\n| Property | Type | Required | Description |\n|:---|:---|:---:|:---|\n| children | node | | Any valid React node |\n\nLicense\n---------\n\n*react-presents* is available under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbvaughn%2Freact-presents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbvaughn%2Freact-presents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbvaughn%2Freact-presents/lists"}