mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-11 14:46:02 +03:00
Edit docs
This commit is contained in:
parent
a2021e676e
commit
0c6da83d2d
@ -18,6 +18,7 @@
|
||||
- `--out-dir` - decks are now built in the `public/` directory
|
||||
- `--no-html` - individual slides are rendered client side, but the first slide is always rendered as static HTML using Gatsby
|
||||
- Custom `Presenter` components can no longer be added to a theme. Use the component shadowing API with the Gatsby theme instead.
|
||||
- Multiple MDX files can no longer be combined into a single presentation
|
||||
|
||||
[theme ui]: https://theme-ui.com
|
||||
|
||||
|
106
docs/advanced.md
106
docs/advanced.md
@ -3,112 +3,34 @@
|
||||
## Custom Provider component
|
||||
|
||||
A custom Provider component is useful for adding custom context providers in React or adding persistent UI elements to the entire deck.
|
||||
|
||||
To define a custom Provider component, you'll need to import it into your custom theme and set it using the key `Provider` like shown below:
|
||||
To define a custom Provider component, you'll need to import it and add it as the `Provider` key in your theme.
|
||||
|
||||
```js
|
||||
// example theme.js
|
||||
import Provider from './Provider'
|
||||
|
||||
export default {
|
||||
font: 'Georgia, serif',
|
||||
fonts: {
|
||||
body: 'Georgia, serif',
|
||||
},
|
||||
Provider,
|
||||
}
|
||||
```
|
||||
|
||||
A custom Provider component will receive the application's state as props,
|
||||
which can be used to show custom page numbers or add other elements to the UI.
|
||||
|
||||
#### Props
|
||||
|
||||
- `slides`: (array) the components for each slide
|
||||
- `index`: (number) the current slide index
|
||||
- `mode`: (string) the current mode (one of `'normal'`, `'presenter'`, or `'overview'`)
|
||||
- `step`: (number) the current visible step in an Appear or Step component
|
||||
- Each slide includes a `meta` object with a `notes` field when the Notes component is used within a slide
|
||||
|
||||
#### Example
|
||||
|
||||
The example below will display the current slide out of the total amount of slides.
|
||||
Use the `useDeck` hook to get the presentation state in your custom `Provider` component.
|
||||
|
||||
```js
|
||||
// Example Provider.js
|
||||
// example Provider.js
|
||||
import React from 'react'
|
||||
import { useDeck } from 'mdx-deck'
|
||||
|
||||
function AtTheBottomCenter ({ children }) {
|
||||
const css = {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
color: #ffffff;
|
||||
textAlign: 'center',
|
||||
}
|
||||
export default props => {
|
||||
const state = useDeck()
|
||||
|
||||
return <div css={css}>
|
||||
{children}
|
||||
</div>
|
||||
}
|
||||
|
||||
export function Provider ({ children, ...props }) {
|
||||
return <>
|
||||
{children}
|
||||
<AtTheBottomCenter>{props.index}/{props.slides.length}</AtTheBottomCenter>
|
||||
</>
|
||||
return (
|
||||
<div>
|
||||
{props.children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Combining multiple mdx files
|
||||
|
||||
Unlike the official `@mdx-js/loader`,
|
||||
the `@mdx-deck/loader` exports an additional `slides` array of components instead of just the entire document.
|
||||
Multiple MDX files can be combined into a single presentation if the filesize is getting difficult to manage.
|
||||
|
||||
First create a couple `.mdx` files like any other MDX Deck file, with `---` to separate the different slides.
|
||||
|
||||
```mdx
|
||||
# one.mdx
|
||||
|
||||
---
|
||||
|
||||
This is the first file
|
||||
```
|
||||
|
||||
```mdx
|
||||
# two.mdx
|
||||
|
||||
---
|
||||
|
||||
This is the second file
|
||||
```
|
||||
|
||||
Next, create a `.js` file to import and combine the two `.mdx` files.
|
||||
|
||||
```js
|
||||
// deck.js
|
||||
// if you want to include a theme, you would export here:
|
||||
// export { dark as theme } from 'mdx-deck/themes';
|
||||
|
||||
import { slides as one } from './one.mdx'
|
||||
import { slides as two } from './two.mdx'
|
||||
|
||||
export const slides = [...one, ...two]
|
||||
```
|
||||
|
||||
Then, point the MDX Deck CLI comment in your `package.json` to the `deck.js` file.
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"start": "mdx-deck deck.js"
|
||||
}
|
||||
```
|
||||
|
||||
## Custom Components
|
||||
|
||||
To build custom components that hook into internal MDX Deck state, you might want to use the following APIs:
|
||||
|
||||
- [useSteps](api.md#usesteps-hook)
|
||||
- [useDeck](api.md#usedeck-hook)
|
||||
|
||||
[mdx]: https://mdxjs.com
|
||||
[mdxprovider]: https://github.com/mdx-js/mdx/blob/master/docs/getting-started/index.md#mdxprovider
|
||||
|
Loading…
Reference in New Issue
Block a user