Merge pull request #359 from pomber/use-theme

Add useTheme hook

docs/api.md

@@ -101,4 +101,20 @@ export default props => {
 }
 ```
 
+## `useTheme` Hook
+
+The `useTheme` hook returns the current [theme](theming.md).
+
+```jsx
+// example
+import React from 'react'
+import { useTheme } from '@mdx-deck/components'
+
+export default props => {
+  const theme = useTheme()
+
+  return <h2 style={{ border: `1px solid ${theme.colors.text}` }}>Hello</h2>
+}
+```
+
 [provider component]: advanced.md#custom-provider-component

packages/components/src/AspectRatioSlide.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
-import { ThemeContext } from '@emotion/core'
 import styled from '@emotion/styled'
 import FluidFontSize from './FluidFontSize'
+import useTheme from './useTheme'
 
 const getPadding = ratio =>
   ratio > 1 ? (1 / ratio) * 100 + '%' : ratio * 100 + '%'
@@ -36,7 +36,7 @@ const Inner = styled.div(
 )
 
 export default props => {
-  const theme = useContext(ThemeContext)
+  const theme = useTheme()
   if (!theme.aspectRatio) {
     return <>{props.children}</>
   }

packages/components/src/index.js

@@ -7,6 +7,7 @@ export { Steps } from './Steps'
 export { Appear } from './Appear'
 export { withContext, useDeck } from './context'
 export { default as useSteps } from './useSteps'
+export { default as useTheme } from './useTheme'
 
 export { Slide } from './Slide'
 export { Zoom } from './Zoom'

packages/components/src/useTheme.js

@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import { ThemeContext } from '@emotion/core'
+
+export default () => useContext(ThemeContext)