mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-10-26 07:37:23 +03:00
Add example for themes
This commit is contained in:
parent
96b1e72369
commit
6b680d25d3
@ -11,6 +11,7 @@
|
|||||||
- [Appear](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/appear)
|
- [Appear](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/appear)
|
||||||
- [Head](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/head)
|
- [Head](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/head)
|
||||||
- [Provider](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider)
|
- [Provider](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider)
|
||||||
|
- [Themes](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/themes)
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
- [useSteps](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/use-steps)
|
- [useSteps](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/use-steps)
|
||||||
|
23
examples/themes/deck.mdx
Normal file
23
examples/themes/deck.mdx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { ThemeName } from './theme'
|
||||||
|
export { theme } from './theme'
|
||||||
|
|
||||||
|
# Hello <ThemeName />!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
This deck has a custom Provider component
|
||||||
|
that lets you switch between all the different themes.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export default ({ children }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{children}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
13
examples/themes/package.json
Normal file
13
examples/themes/package.json
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"name": "@mdx-deck/themes-example",
|
||||||
|
"version": "2.3.2",
|
||||||
|
"scripts": {
|
||||||
|
"start": "mdx-deck deck.mdx",
|
||||||
|
"build": "mdx-deck build deck.mdx",
|
||||||
|
"help": "mdx-deck"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"mdx-deck": "^2.3.2"
|
||||||
|
}
|
||||||
|
}
|
67
examples/themes/theme.js
Normal file
67
examples/themes/theme.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import React, { useState, useContext } from 'react'
|
||||||
|
import { ThemeProvider } from 'emotion-theming'
|
||||||
|
import { MDXProvider } from '@mdx-js/react'
|
||||||
|
import * as themes from '@mdx-deck/themes'
|
||||||
|
|
||||||
|
const names = Object.keys(themes)
|
||||||
|
|
||||||
|
const DefaultProvider = props => <>{props.children}</>
|
||||||
|
|
||||||
|
const Context = React.createContext()
|
||||||
|
|
||||||
|
const Provider = props => {
|
||||||
|
const [name, setTheme] = useState(names[0])
|
||||||
|
const cycle = e => {
|
||||||
|
const i = (names.indexOf(name) + 1) % names.length
|
||||||
|
setTheme(names[i])
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseTheme = themes[name]
|
||||||
|
const theme = typeof baseTheme === 'function' ? baseTheme({}) : baseTheme
|
||||||
|
const Root = theme.Provider || DefaultProvider
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Context.Provider value={name}>
|
||||||
|
<ThemeProvider theme={theme}>
|
||||||
|
<MDXProvider components={theme.components}>
|
||||||
|
<Root>{props.children}</Root>
|
||||||
|
</MDXProvider>
|
||||||
|
</ThemeProvider>
|
||||||
|
</Context.Provider>
|
||||||
|
<div
|
||||||
|
css={{
|
||||||
|
position: 'fixed',
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
margin: 16,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<label>
|
||||||
|
Theme
|
||||||
|
<select
|
||||||
|
value={name}
|
||||||
|
onChange={e => {
|
||||||
|
setTheme(e.target.value)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{names.map(name => (
|
||||||
|
<option key={name}>{name}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<button onClick={cycle}>Next</button>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ThemeName = props => {
|
||||||
|
const context = useContext(Context)
|
||||||
|
|
||||||
|
return <>{context}</>
|
||||||
|
}
|
||||||
|
|
||||||
|
export const theme = {
|
||||||
|
Provider,
|
||||||
|
}
|
@ -320,6 +320,7 @@ The following examples will open in CodeSandbox.
|
|||||||
- [Appear](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/appear)
|
- [Appear](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/appear)
|
||||||
- [Head](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/head)
|
- [Head](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/head)
|
||||||
- [Provider](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider)
|
- [Provider](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider)
|
||||||
|
- [Themes](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/themes)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user