React幻灯片框架

Getting started

Install react-presents using npm.

npm install react-presents --save

ES6, CommonJS, and UMD builds are available with each distribution. For example:

// Import the components you want like so:import { Presentation, Slide } from 'react-presents'

Alternately you can load a global-friendly UMD build which exposes a global ReactPresents object:

Now you're ready to start using the components.

For 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.

Example Usage

Creating a Slide

Presentation 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:

/* SomeSlide.js */import React from 'react'import { ContentSlide, Step } from 'react-presents'export default () => (

A simple slide

Slides can contain multiple steps.

• Sub-text can appear only for a specific step
• Or it can be additive
• (By default it is additive)
• They can also be shown for a range

)

Automatically Loading Slides

Using a bundler like Webpack, you can auto-load slides using an approach like follows:

Webpack 2

/* Application.js */const slides = require.context('./path/to/slides/', false, /\.js$/) .keys() .map((filename) => filename.replace('./', './path/to/slides/')) .map((path) => require(path).default)

Webpack 3

/* Application.js */const slides = []const context = require.context('./path/to/slides/', false, /\.js$/)context .keys() .forEach(key => slides.push(context(key).default))

Creating a Nav Menu

Once you have an array of loaded slides, you can auto-populate the options for a nav menu using an approach like so:

/* Application.js */const options = slides .map((slide, index) => ({ label: slide.title, value: index })) .filter((option) => option.label)

Note that the above approach assumes that slides have a static title attribute, eg:

/* SomeSlide.js */import React from 'react'import { ContentSlide } from 'react-presents'const slide = () => (

{slide.title}

{/* Your content goes here */} )slide.title = 'The first slide'export default slide

Also note that react-select is used beneath the hood so the options array you construct must be compatible with it.

Creating a presentation

Assuming you have an array of slides and options for the drop-down nav, you can create a presentation like follows:

import React from 'react'import { Presentation, Slide, DropDownNav } from 'react-presents'export default () => ( {slides.map((Component, index) => ( )).concat( )} )

A default theme is provided with react-presents. You can disable this theme by specifying the disableTheme property:

{slides}

Presenter mode

To include presenter mode, you could use PresenterModePlugin enabling you to move to presenter mode by pressing p or P as shown below:

{slides}

Api

Code

Syntax highlighting powered by react-codemirror.

Property	Type	Required	Description
className	string	Optional CSS class name to attach to root code mirror node
codeMirrorOptions	object	Configuration obect to pass to CodeMirror
dimLines	array	Array of line-number ranges for lines that should be dimmed
highlightLines	array	Array of line-number ranges for lines that should be highlighted
value	string	✓	String to highlight

ContentSlide

Slide container with basic formatting. Intended for slides with moderate amounts of content.

Property	Type	Required	Description
children	node	Any valid React node

Presentation

Main presentation component, a collection of slides.

Property	Type	Required	Description
children	any	✓	Any React node (typically slides)
disableTheme	bool	Do not set default theme/styles
router	any	Specific react-router implementation to use; HashRouter is used by default

Slide

An 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.

Property	Type	Required	Description
component	node	Any valid React node
render	function	Function that returns a React element

Step

Helper 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).

Property	Type	Required	Description
children	node	✓	Any valid React node
exact	bool	✓	Only show content when the slide's current step index is exactly the index specified
index	number	Don't show child content until the current step index is at least equal to this
maxIndex	number	Don't show child content if the current step index exceeds this

TitleSlide

Slide container with basic formatting. Intended for sparse content, title slides.

Property	Type	Required	Description
children	node	Any valid React node

License

react-presents is available under the MIT License.

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。