diff --git a/.npmignore b/.npmignore index b91999e64..8b39c4d5e 100644 --- a/.npmignore +++ b/.npmignore @@ -7,6 +7,7 @@ !/src !/docs __snapshots__ +__mocks__ *.test.js !LICENSE !README.md diff --git a/.prettierignore b/.prettierignore index 04fe05da7..aa5c6df5d 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,7 @@ package-lock.json -package.json \ No newline at end of file +package.json +node_modules +dist +es +lib +example/assets diff --git a/.travis.yml b/.travis.yml index cfe28fab1..356173a6b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,7 +3,7 @@ language: node_js node_js: - "6" - "8" - - "9" + - "10" # Use container-based Travis infrastructure. sudo: false @@ -19,4 +19,4 @@ notifications: script: - yarn run build - - yarn run check + - yarn run check-ci diff --git a/README.md b/README.md index 58cb3c8f9..1d85aacfa 100644 --- a/README.md +++ b/README.md @@ -10,55 +10,55 @@ ReactJS based Presentation Library -- [Getting Started](#getting-started) -- [One Page](#one-page) -- [Development](#development) -- [Build & Deployment](#build--deployment) -- [Presenting](#presenting) -- [Controls](#controls) -- [Fullscreen](#fullscreen) -- [PDF Export](#pdf-export) -- [Basic Concepts](#basic-concepts) - - [Main file](#main-file) - - [Themes](#themes) - - [createTheme(colors, fonts)](#createthemecolors-fonts) -- [FAQ](#faq) -- [Tag API](#tag-api) - - [Main Tags](#main-tags) - - [Deck](#deck) - - [Slide (Base)](#slide-base) - - [Notes](#notes) - - [MarkdownSlides](#markdown-slides) - - [Layout Tags](#layout-tags) - - [Layout](#layout) - - [Fit](#fit) - - [Fill](#fill) - - [Markdown Tag](#markdown-tag) - - [Markdown](#markdown) - - [Magic Tag](#magic-tag) - - [Magic](#magic) - - [Element Tags](#element-tags) - - [Appear](#appear) - - [BlockQuote, Quote and Cite (Base)](#blockquote-quote-and-cite-base) - - [CodePane (Base)](#codepane-base) - - [Code (Base)](#code-base) - - [ComponentPlayground](#component-playground) - - [GoToAction (Base)](#go-to-action) - - [Heading (Base)](#heading-base) - - [Image (Base)](#image-base) - - [Link (Base)](#link-base) - - [List & ListItem (Base)](#list--listitem-base) - - [S (Base)](#s-base) - - [Table, TableRow, TableBody, TableHeader, TableHeaderItem and TableItem (Base)](#table-tablerow-tableheaderitem-and-tableitem-base) - - [Text (Base)](#text-base) - - [Typeface](#typeface) - - [Base Props](#base-props) -- [Third Party Extensions](#third-party) +* [Getting Started](#getting-started) +* [One Page](#one-page) +* [Development](#development) +* [Build & Deployment](#build--deployment) +* [Presenting](#presenting) +* [Controls](#controls) +* [Fullscreen](#fullscreen) +* [PDF Export](#pdf-export) +* [Basic Concepts](#basic-concepts) + * [Main file](#main-file) + * [Themes](#themes) + * [createTheme(colors, fonts)](#createthemecolors-fonts) +* [FAQ](#faq) +* [Tag API](#tag-api) + * [Main Tags](#main-tags) + * [Deck](#deck) + * [Slide (Base)](#slide-base) + * [Notes](#notes) + * [MarkdownSlides](#markdown-slides) + * [Layout Tags](#layout-tags) + * [Layout](#layout) + * [Fit](#fit) + * [Fill](#fill) + * [Markdown Tag](#markdown-tag) + * [Markdown](#markdown) + * [Magic Tag](#magic-tag) + * [Magic](#magic) + * [Element Tags](#element-tags) + * [Appear](#appear) + * [BlockQuote, Quote and Cite (Base)](#blockquote-quote-and-cite-base) + * [CodePane (Base)](#codepane-base) + * [Code (Base)](#code-base) + * [ComponentPlayground](#component-playground) + * [GoToAction (Base)](#go-to-action) + * [Heading (Base)](#heading-base) + * [Image (Base)](#image-base) + * [Link (Base)](#link-base) + * [List & ListItem (Base)](#list--listitem-base) + * [S (Base)](#s-base) + * [Table, TableRow, TableBody, TableHeader, TableHeaderItem and TableItem (Base)](#table-tablerow-tableheaderitem-and-tableitem-base) + * [Text (Base)](#text-base) + * [Typeface](#typeface) + * [Base Props](#base-props) +* [Third Party Extensions](#third-party) - + ## Getting Started The new best way to get started is by running `create-react-app my-presentation --scripts-version spectacle-scripts`. This will use `create-react-app` to create almost everything you need. This however, doesn't include publish scripts, and ejecting is required for fancy stuff. @@ -72,14 +72,15 @@ Note that we have webpack externals for `react`, `react-dom`, and `prop-types`, But really, it is SO much easier to just use the boilerplate. Trust me. + ## One Page To aid with speedy development / kicking the tires on spectacle, we support using a simple boilerplate HTML page with a bespoke script tag that contains your entire presentation. The rest of the setup will take care of transpiling your React/ESnext code, providing Spectacle, React, and ReactDOM libraries, and being raring to go with a minimum of effort. We can start with this project's sample at [`one-page.html`](./one-page.html). It's essentially, the same presentation as the fully-built-from-source version, with a few notable exceptions: -1. There are no `import`s or `require`s. Everything must come from the global namespace. This includes `Spectacle`, `React`, `ReactDOM` and all the Spectacle exports from [`./src/index.js`](./src/index.js) -- `Deck`, `Slide`, `themes`, etc. -2. The presentation must include exactly **one** script tag with the type `text/spectacle` that is a function. Presently, that function is directly inserted inline into a wrapper code boilerplate as a React Component `render` function. The wrapper is transpiled. There should not be any extraneous content around it like outer variables or comments. +1. There are no `import`s or `require`s. Everything must come from the global namespace. This includes `Spectacle`, `React`, `ReactDOM` and all the Spectacle exports from [`./src/index.js`](./src/index.js) -- `Deck`, `Slide`, `themes`, etc. +2. The presentation must include exactly **one** script tag with the type `text/spectacle` that is a function. Presently, that function is directly inserted inline into a wrapper code boilerplate as a React Component `render` function. The wrapper is transpiled. There should not be any extraneous content around it like outer variables or comments. **Good** examples: @@ -153,6 +154,7 @@ We can start with this project's sample at [`one-page.html`](./one-page.html). I ``` + ## Development After downloading the boilerplate, your first order of business is to open terminal and run `npm install` @@ -164,6 +166,7 @@ Then, to start up the local server, run `npm start` Open a browser and hit [http://localhost:3000](http://localhost:3000), and we are ready to roll + ## Build & Deployment Building the dist version of the slides is as easy as running `npm run build:dist` @@ -173,6 +176,7 @@ If you want to deploy the slideshow to surge, run `npm run deploy` ⚠️ If you are deploying the dist version to [GitHub Pages](https://pages.github.com/ 'GitHub Pages'), note that the built bundle uses an absolute path to the `/dist/` directory while GitHub Pages requires the relative `./dist/` to find any embedded assets and/or images. A very hacky way to fix this is to edit one place in the produced bundle, as shown [in this GitHub issue](https://github.com/FormidableLabs/spectacle/issues/326#issue-233283633 'GitHub: spectacle issue #326'). + ## Presenting Spectacle comes with a built in presenter mode. It shows you a slide lookahead, current time and your current slide: @@ -185,12 +189,12 @@ Otherwise, it can also show you a stopwatch to count the elapsed time: To present: -- Run `npm start` -- Open two browser windows on two different screens -- On your screen visit [http://localhost:3000/](http://localhost:3000/). You will be redirected to a URL containing the slide id. -- Add `presenter&` or `presenter&timer` immediately after the questionmark, e.g.: [http://localhost:3000/#/0?presenter](http://localhost:3000/#/0?presenter) or [http://localhost:3000/#/0?presenter&timer](http://localhost:3000/#/?presenter&timer&_k=wbyhif) -- On the presentation screen visit [http://localhost:3000/](http://localhost:3000/) -- Give an amazingly stylish presentation +* Run `npm start` +* Open two browser windows on two different screens +* On your screen visit [http://localhost:3000/](http://localhost:3000/). You will be redirected to a URL containing the slide id. +* Add `presenter&` or `presenter&timer` immediately after the questionmark, e.g.: [http://localhost:3000/#/0?presenter](http://localhost:3000/#/0?presenter) or [http://localhost:3000/#/0?presenter&timer](http://localhost:3000/#/?presenter&timer&_k=wbyhif) +* On the presentation screen visit [http://localhost:3000/](http://localhost:3000/) +* Give an amazingly stylish presentation _Note: Any windows/tabs in the same browser that are running Spectacle will sync to one another, even if you don't want to use presentation mode_ @@ -201,58 +205,62 @@ Check it out: You can toggle the presenter or overview mode by pressing respectively `alt+p` and `alt+o`. + ## Controls -|Key Combination|Function| -|---|---| -|Right Arrow|Next Slide| -|Left Arrow|Previous Slide| -|Space|Next Slide| -|Shift+Space|Previous Slide| -|Alt/Option + O|Toggle Overview Mode| -|Alt/Option + P|Toggle Presenter Mode| -|Alt/Option + T|Toggle Timer in Presenter Mode| -|Alt/Option + A|Start autoplay (if enabled)| +| Key Combination | Function | +| --------------- | ------------------------------ | +| Right Arrow | Next Slide | +| Left Arrow | Previous Slide | +| Space | Next Slide | +| Shift+Space | Previous Slide | +| Alt/Option + O | Toggle Overview Mode | +| Alt/Option + P | Toggle Presenter Mode | +| Alt/Option + T | Toggle Timer in Presenter Mode | +| Alt/Option + A | Start autoplay (if enabled) | + ## Fullscreen Fullscreen can be toggled via browser options, or by **hovering over the bottom right corner of your window until the fullscreen icon appears and clicking it**. + ## PDF Export Exporting a totally sweet looking PDF from your totally sweet looking Spectacle presentation is absurdly easy. You can either do this via the browser, or from the command line: #### CLI -- Run `npm install spectacle-renderer -g` -- Run `npm start` on your project and wait for it to build and be available -- Run `spectacle-renderer` -- A totally cool PDF is created in your project directory +* Run `npm install spectacle-renderer -g` +* Run `npm start` on your project and wait for it to build and be available +* Run `spectacle-renderer` +* A totally cool PDF is created in your project directory For more options and configuration of this tool, check out: [https://github.com/FormidableLabs/spectacle-renderer](https://github.com/FormidableLabs/spectacle-renderer) - #### Browser -- Run `npm start` -- Open [http://localhost:3000/](http://localhost:3000/) -- Add `export&` after the `?` on the URL of page you are redirected to, e.g.: [http://localhost:3000/#/?export&_k=wbyhif](http://localhost:3000/#/?export&_k=wbyhif) -- Bring up the print dialog `(ctrl or cmd + p)` -- Check "Background Graphics" to on if you are about that life -- Change destination to "Save as PDF", as shown below: +* Run `npm start` +* Open [http://localhost:3000/](http://localhost:3000/) +* Add `export&` after the `?` on the URL of page you are redirected to, e.g.: [http://localhost:3000/#/?export&\_k=wbyhif](http://localhost:3000/#/?export&_k=wbyhif) +* Bring up the print dialog `(ctrl or cmd + p)` +* Check "Background Graphics" to on if you are about that life +* Change destination to "Save as PDF", as shown below: ![http://i.imgur.com/t6GL5Oc.png](http://i.imgur.com/t6GL5Oc.png) If you want to print your slides, and want a printer friendly version, simply repeat the above process but instead print from [http://localhost:3000/?export&print](http://localhost:3000/?export&print) + ## Basic Concepts + ### Main file Your presentation files & assets will live in the `presentation` folder. @@ -266,8 +274,22 @@ Check it out [here](https://github.com/FormidableLabs/spectacle-boilerplate/blob import React, { Component } from 'react'; import { - Appear, BlockQuote, Cite, CodePane, Code, Deck, Fill, Fit, - Heading, Image, Layout, ListItem, List, Quote, Slide, Text + Appear, + BlockQuote, + Cite, + CodePane, + Code, + Deck, + Fill, + Fit, + Heading, + Image, + Layout, + ListItem, + List, + Quote, + Slide, + Text } from 'spectacle'; export default class extends Component { @@ -281,7 +303,6 @@ export default class extends Component { ); } } - ``` Here is where you can use the library's tags to compose your presentation. While you can use any JSX syntax here, building your presentation with the supplied tags allows for theming to work properly. @@ -289,6 +310,7 @@ Here is where you can use the library's tags to compose your presentation. While The bare minimum you need to start is a `Deck` element and a `Slide` element. Each `Slide` element represents a slide inside of your slideshow. + ### Themes In Spectacle, themes are functions that return style objects for `screen` & `print`. @@ -296,7 +318,7 @@ In Spectacle, themes are functions that return style objects for `screen` & `pri You can import the default theme from: ```jsx -import createTheme from "spectacle/lib/themes/default"; +import createTheme from 'spectacle/lib/themes/default'; ``` Or create your own based upon the source. @@ -306,23 +328,32 @@ Or create your own based upon the source. You will want to edit `index.html` to include any web fonts or additional CSS that your theme requires. + #### createTheme(colors, fonts) Spectacle's functional theme system allows you to pass in color and font variables that you can use on your elements. The fonts configuration object can take a string for a system font or an object that specifies it‘s a Google Font. If you use a Google Font you can provide a styles array for loading different weights and variations. Google Font tags will be automatically created. See the example below: ```jsx -const theme = createTheme({ - primary: "red", - secondary: "blue" -}, { - primary: "Helvetica", - secondary: { name: "Droid Serif", googleFont: true, styles: [ "400", "700i" ] } -}); +const theme = createTheme( + { + primary: 'red', + secondary: 'blue' + }, + { + primary: 'Helvetica', + secondary: { + name: 'Droid Serif', + googleFont: true, + styles: ['400', '700i'] + } + } +); ``` The returned theme object can then be passed to the `Deck` tag via the `theme` prop, and will override the default styles. + ## FAQ _How can I easily style the base components for my presentation?_ @@ -353,66 +384,72 @@ export default class mySlides extends Component { 2 3 - ) + ); } } - ``` + ## Tag API In Spectacle, presentations are composed of a set of base tags. We can separate these into three categories: Main tags, Layout tags & Element tags. + ### Main Tags + #### Deck The Deck tag is the root level tag for your presentation. It supports the following props: -|Name|PropType|Description| -|---|---|---| -|controls| PropTypes.bool| Show control arrows when not in fullscreen -|contentHeight| PropTypes.numbers| Baseline content area height (default: 700) -|contentWidth| PropTypes.numbers| Baseline content area width (default: 1000) -|history|PropTypes.object|Accepts custom configuration for [history](https://github.com/ReactTraining/history) -|progress| PropTypes.string|Accepts `pacman`, `bar`, `number` or `none`. To override the color, change the 'quarternary' color in the theme. -|theme|PropTypes.object|Accepts a theme object for styling your presentation| -|transition|PropTypes.array|Accepts `slide`, `zoom`, `fade` or `spin`, and can be combined. Sets global slide transitions. **Note: If you use the 'scale' transition, fitted text won't work in Safari.**| -|transitionDuration| PropTypes.number| Accepts integer value in milliseconds for global transition duration. -|autoplay|PropTypes.bool| Automatically advance slides. -|autoplayDuration|PropTypes.number| Accepts integer value in milliseconds for global autoplay duration, defaults to 7000. +| Name | PropType | Description | +| ------------------ | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| controls | PropTypes.bool | Show control arrows when not in fullscreen | +| contentHeight | PropTypes.numbers | Baseline content area height (default: 700) | +| contentWidth | PropTypes.numbers | Baseline content area width (default: 1000) | +| history | PropTypes.object | Accepts custom configuration for [history](https://github.com/ReactTraining/history) | +| progress | PropTypes.string | Accepts `pacman`, `bar`, `number` or `none`. To override the color, change the 'quarternary' color in the theme. | +| theme | PropTypes.object | Accepts a theme object for styling your presentation | +| transition | PropTypes.array | Accepts `slide`, `zoom`, `fade` or `spin`, and can be combined. Sets global slide transitions. **Note: If you use the 'scale' transition, fitted text won't work in Safari.** | +| transitionDuration | PropTypes.number | Accepts integer value in milliseconds for global transition duration. | +| autoplay | PropTypes.bool | Automatically advance slides. | +| autoplayDuration | PropTypes.number | Accepts integer value in milliseconds for global autoplay duration, defaults to 7000. | + #### Slide (Base) The slide tag represents each slide in the presentation. Giving a slide tag an `id` attribute will replace its number based navigation hash with the `id` provided. It supports the following props, in addition to any of the props outlined in the Base class props listing: -|Name|PropType|Description| -|---|---|---| -|align| PropTypes.string | Accepts a space delimited value for positioning interior content. The first value can be `flex-start` (left), `center` (middle), or `flex-end` (right). The second value can be `flex-start` (top) , `center` (middle), or `flex-end` (bottom). You would provide this prop like `align="center center"`, which is its default. -|controlColor| PropTypes.string | Used to override color of control arrows on a per slide basis, accepts color aliases, or valid color values. -|goTo| PropTypes.number | Used to navigate to a slide for out-of-order presenting. Slide numbers start at `1`. This can also be used to skip slides as well. -|id| PropTypes.string | Used to create a string based hash. -|maxHeight| PropTypes.number | Used to set max dimensions of the Slide. -|maxWidth| PropTypes.number | Used to set max dimensions of the Slide. -|notes| PropTypes.string| Text which will appear in the presenter mode. Can be HTML. -|onActive|PropTypes.func| Optional function that is called with the slide index when the slide comes into view. -|progressColor| PropTypes.string | Used to override color of progress elements on a per slide basis, accepts color aliases, or valid color values. -|transition|PropTypes.array|Accepts `slide`, `zoom`, `fade`, `spin`, or a [function](#transition-function), and can be combined. Sets the slide transition. This will affect both enter and exit transitions. **Note: If you use the 'scale' transition, fitted text won't work in Safari.**| -|transitionIn|PropTypes.array|Specifies the slide transition when the slide comes into view. Accepts the same values as transition.| -|transitionOut|PropTypes.array|Specifies the slide transition when the slide exits. Accepts the same values as transition.| -|transitionDuration| PropTypes.number| Accepts integer value in milliseconds for slide transition duration. +| Name | PropType | Description | +| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| align | PropTypes.string | Accepts a space delimited value for positioning interior content. The first value can be `flex-start` (left), `center` (middle), or `flex-end` (right). The second value can be `flex-start` (top) , `center` (middle), or `flex-end` (bottom). You would provide this prop like `align="center center"`, which is its default. | +| controlColor | PropTypes.string | Used to override color of control arrows on a per slide basis, accepts color aliases, or valid color values. | +| goTo | PropTypes.number | Used to navigate to a slide for out-of-order presenting. Slide numbers start at `1`. This can also be used to skip slides as well. | +| id | PropTypes.string | Used to create a string based hash. | +| maxHeight | PropTypes.number | Used to set max dimensions of the Slide. | +| maxWidth | PropTypes.number | Used to set max dimensions of the Slide. | +| notes | PropTypes.string | Text which will appear in the presenter mode. Can be HTML. | +| onActive | PropTypes.func | Optional function that is called with the slide index when the slide comes into view. | +| progressColor | PropTypes.string | Used to override color of progress elements on a per slide basis, accepts color aliases, or valid color values. | +| transition | PropTypes.array | Accepts `slide`, `zoom`, `fade`, `spin`, or a [function](#transition-function), and can be combined. Sets the slide transition. This will affect both enter and exit transitions. **Note: If you use the 'scale' transition, fitted text won't work in Safari.** | +| transitionIn | PropTypes.array | Specifies the slide transition when the slide comes into view. Accepts the same values as transition. | +| transitionOut | PropTypes.array | Specifies the slide transition when the slide exits. Accepts the same values as transition. | +| transitionDuration | PropTypes.number | Accepts integer value in milliseconds for slide transition duration. | + ##### Wrapping Slides If you author your slides in another file or want any kind of grouping that requires one additional level of nesting, you can add a `hasSlideChildren` prop to their parent element. This lets Spectacle identify that it is a wrapper, and will disregard the heirarchy instead opting to read the child slides as if the wrapper was not present. + ##### Transition Function + Spectacle now supports defining custom transitions. The function prototype is `(transitioning: boolean, forward: boolean) => Object`. The `transitioning` param is true when the slide enters and exits. The `forward` param is `true` when the slide is entering, `false` when the slide is exiting. The function returns a style object. You can mix string-based transitions and functions. Styles provided when `transitioning` is `false` will appear during the lifecyle of the slide. An example is shown below: ```jsx @@ -434,6 +471,7 @@ Spectacle now supports defining custom transitions. The function prototype is `( ``` + #### Notes The notes tag allows to use any tree of react elements as the notes of a slide. It is used as a child node of a slide tag and its children override any value given as the `notes` attribute of its parent slide. @@ -452,6 +490,7 @@ The notes tag allows to use any tree of react elements as the notes of a slide. ``` + ### MarkdownSlides The MarkdownSlides function lets you create a single or multiple slides using Markdown. It can be used as a tagged template literal or a function. Three dashes (`---`) are used as a delimiter between slides. @@ -481,43 +520,51 @@ import slidesMarkdown from "raw-loader!markdown.md"; ``` + ### Layout Tags Layout tags are used for layout using Flexbox within your slide. They are `Layout`, `Fit` & `Fill`. + #### Layout The layout tag is used to wrap `Fit` and `Fill` tags to provide a row. + #### Fit The fit tag only takes up as much space as its bounds provide. + #### Fill The fill tag takes up all the space available to it. For example, if you have a `Fill` tag next to a `Fit` tag, the `Fill` tag will take up the rest of the space. Adjacent `Fill` tags split the difference and form an equidistant grid. + ### Markdown Tag + #### Markdown (Base) The Markdown tag is used to add inline markdown to your slide. You can provide markdown source via the `source` prop, or as children. You can also provide a custom [mdast configuration](https://github.com/wooorm/mdast) via the `mdastConfig` prop. Markdown generated tags aren't prop configurable, and instead render with your theme defaults. -|Name|PropType|Description| -|---|---|---| -|source|PropTypes.string| Markdown source | +| Name | PropType | Description | +| ------ | ---------------- | --------------- | +| source | PropTypes.string | Markdown source | + ### Magic Tag + #### Magic > NOTE: The Magic tag uses the Web Animations API. If you use the Magic tag and want it to work places other than Chrome, you will need to include the polyfill [https://github.com/web-animations/web-animations-js](https://github.com/web-animations/web-animations-js) @@ -528,8 +575,12 @@ Using Magic is pretty simple, you just wrap your slides with it, and it transiti ```javascript - First Heading - Second Heading + + First Heading + + + Second Heading + ``` @@ -538,42 +589,46 @@ Transitioning between similar states will vary based upon the input content. It Until then, feedback is very welcome, as this is a non-trivial feature and we anticipate iterating on the behind the scenes mechanics of how it works, so that we can accommodate most use cases. + ### Element Tags The element tags are the bread and butter of your slide content. Most of these tags derive their props from the Base class, but the ones that have special options will have them listed: + #### Appear This tag does not extend from Base. It's special. Wrapping elements in the appear tag makes them appear/disappear in order in response to navigation. For best performance, wrap the contents of this tag in a native DOM element like a `
` or ``. -|Name|PropType|Description| -|---|---|---| -|order|PropTypes.number| An optional integer starting at 1 for the presentation order of the Appear tags within a slide. If a slide contains ordered and unordered Appear tags, the unordered will show first. -|transitionDuration|PropTypes.number|An optional duration (in milliseconds) for the Appear animation. Default value is `300`. -|startValue|Proptypes.object|An optional style object that defines the starting, inactive state of the Appear tag. The default animation is a simple fade-in, so the default `startValue` value is `{ opacity: 0 }`. -|endValue|Proptypes.object|An optional style object that defines the ending, active state of the Appear tag. The default animation is a simple fade-in, so the default `endValue` value is `{ opacity: 1 }`. -|easing|PropTypes.string|An optional victory easing curve for the Appear animation. The various options are documented in the [Victory Animation easing docs](https://formidable.com/open-source/victory/docs/victory-animation/#easing). Default value is `quadInOut` +| Name | PropType | Description | +| ------------------ | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| order | PropTypes.number | An optional integer starting at 1 for the presentation order of the Appear tags within a slide. If a slide contains ordered and unordered Appear tags, the unordered will show first. | +| transitionDuration | PropTypes.number | An optional duration (in milliseconds) for the Appear animation. Default value is `300`. | +| startValue | Proptypes.object | An optional style object that defines the starting, inactive state of the Appear tag. The default animation is a simple fade-in, so the default `startValue` value is `{ opacity: 0 }`. | +| endValue | Proptypes.object | An optional style object that defines the ending, active state of the Appear tag. The default animation is a simple fade-in, so the default `endValue` value is `{ opacity: 1 }`. | +| easing | PropTypes.string | An optional victory easing curve for the Appear animation. The various options are documented in the [Victory Animation easing docs](https://formidable.com/open-source/victory/docs/victory-animation/#easing). Default value is `quadInOut` | + #### Anim -If you want extra flexibility with animated animation, you can use the Anim component instead of Appear. It will let you have multi-step animations for each individual fragment. You can use this to create fancy animated intros, in-slide carousels, and many other fancy things. This tag does not extend from Base. It's special. +If you want extra flexibility with animated animation, you can use the Anim component instead of Appear. It will let you have multi-step animations for each individual fragment. You can use this to create fancy animated intros, in-slide carousels, and many other fancy things. This tag does not extend from Base. It's special. For best performance, wrap the contents of this tag in a native DOM element like a `
` or ``. -|Name|PropType|Description| -|---|---|---| -|order|PropTypes.number| An optional integer starting at 1 for the presentation order of the Appear tags within a slide. If a slide contains ordered and unordered Appear tags, the unordered will show first. -|transitionDuration|PropTypes.number|A duration (in milliseconds) for the animation. Default value is `300`. -|fromStyle|Proptypes.object|A style object that defines the starting, inactive state of the Anim tag. -|toStyle|Proptypes.array|An array of style objects that define each step in the animation. They will step from one toStyle object to another, until that fragment is finished with its animations. -|easing|PropTypes.string|A victory easing curve for the Appear animation. The various options are documented in the [Victory Animation easing docs](https://formidable.com/open-source/victory/docs/victory-animation/#easing). -|onAnim|PropTypes.fun|This function is called every time the Anim component plays an animation. It'll be called with two arguments, forwards, a boolean indicating if it was stepped forwards or backwards, and the index of the animation that was just played. +| Name | PropType | Description | +| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| order | PropTypes.number | An optional integer starting at 1 for the presentation order of the Appear tags within a slide. If a slide contains ordered and unordered Appear tags, the unordered will show first. | +| transitionDuration | PropTypes.number | A duration (in milliseconds) for the animation. Default value is `300`. | +| fromStyle | Proptypes.object | A style object that defines the starting, inactive state of the Anim tag. | +| toStyle | Proptypes.array | An array of style objects that define each step in the animation. They will step from one toStyle object to another, until that fragment is finished with its animations. | +| easing | PropTypes.string | A victory easing curve for the Appear animation. The various options are documented in the [Victory Animation easing docs](https://formidable.com/open-source/victory/docs/victory-animation/#easing). | +| onAnim | PropTypes.fun | This function is called every time the Anim component plays an animation. It'll be called with two arguments, forwards, a boolean indicating if it was stepped forwards or backwards, and the index of the animation that was just played. | + #### BlockQuote, Quote and Cite (Base) These tags create a styled blockquote. Use them as follows: @@ -586,16 +641,17 @@ These tags create a styled blockquote. Use them as follows: ``` + #### CodePane (Base) This tag displays a styled, highlighted code preview. I prefer putting my code samples in external `.example` files and requiring them using `raw-loader` as shown in the demo. Here are the props: -|Name|PropType|Description| -|---|---|---| -|lang|PropTypes.string| Prism compatible language name. i.e: 'javascript' | -|source| PropTypes.string| String of code to be shown | -|className| PropTypes.string| String of a className to be appended to the CodePane | -|theme| PropTypes.string| Accepts `light`, `dark`, or `external` for the source editor's syntax highlighting. Defaults to `dark`. | +| Name | PropType | Description | +| --------- | ---------------- | ------------------------------------------------------------------------------------------------------- | +| lang | PropTypes.string | Prism compatible language name. i.e: 'javascript' | +| source | PropTypes.string | String of code to be shown | +| className | PropTypes.string | String of a className to be appended to the CodePane | +| theme | PropTypes.string | Accepts `light`, `dark`, or `external` for the source editor's syntax highlighting. Defaults to `dark`. | If you want to change the theme used here, you can include a prism theme in index.html via a style or a link tag. For your theme to be actually applied correctly you need to set the `theme` prop to `"external"`, which disables our builtin light and dark themes. @@ -605,39 +661,41 @@ themes use very generic CSS selectors. CodePane and Playground both use the prism library under the hood, which has several themes that are available to include. + #### Code (Base) A simple tag for wrapping inline text that you want lightly styled in a monospace font. + #### Component Playground This tag displays a two-pane view with a ES6 source code editor on the right and a preview pane on the left for showing off custom React components. `React` and `render` are supplied as variables. To render a component call `render` with some JSX code. Any `console` output will be forwarded to the main console in the browser. For more information on the playground read the docs over at [react-live](https://github.com/FormidableLabs/react-live). -|Name|PropType|Description| -|---|---|---| -|code|PropTypes.string|The code block you want to initially supply to the component playground. If none is supplied a demo component will be displayed.| -|previewBackgroundColor|PropTypes.string|The background color you want for the preview pane. Defaults to `#fff`.| -|theme| PropTypes.string| Accepts `light`, `dark`, or `external` for the source editor's syntax highlighting. Defaults to `dark`. | -|scope|PropTypes.object|Defines any outside modules or components to expose to the playground. React, Component, and render are supplied for you.| +| Name | PropType | Description | +| ---------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| code | PropTypes.string | The code block you want to initially supply to the component playground. If none is supplied a demo component will be displayed. | +| previewBackgroundColor | PropTypes.string | The background color you want for the preview pane. Defaults to `#fff`. | +| theme | PropTypes.string | Accepts `light`, `dark`, or `external` for the source editor's syntax highlighting. Defaults to `dark`. | +| scope | PropTypes.object | Defines any outside modules or components to expose to the playground. React, Component, and render are supplied for you. | Example code blocks: ```jsx -const Button = ({ title }) => (); +const Button = ({ title }) => ; render(